Vue.js v2 Resources

The initial goal was to override a WordPress plugin’s image slider pagination thumbnails for desktop and mobile. I didn’t even know the plugin was using Vue.js. A lot of learning along the way about Vue instances, components, data, methods. Still haven’t yet reached the goal of overriding the plugin’s Vue.js v2 settings, but this list of resources is getting me there.

Note: While the current version is Vue.js v3 (v3.2.45 as of Nov 11, 2022), the WordPress image slider I’m trying to edit is Vue.js v2, so everything listed below focuses on Vue.js v2.

Vue Js Methods – Demystified – DigitalYA


Components Basics – Vuejs.org


List Rendering – Vuejs.org (last section on page: Vue.component(‘todo-item’, {):

methods: {
    addNewTodo: function () {
      this.todos.push({
        id: this.nextTodoId++,
        title: this.newTodoText
      })
      this.newTodoText = ''
    }
  }

Plugins – Vuejs.org (section #4: Add some Vue instance methods by attaching them to Vue.prototype.):

// 4. add an instance method
  Vue.prototype.$myMethod = function (methodOptions) {
    // some logic ...
  }

Reactivity in Depth – Vuejs.org (last section on page: last “Since $nextTick() returns a promise…”):

methods: {
  updateMessage: async function () {
    this.message = 'updated'
    console.log(this.$el.textContent) // => 'not updated'
    await this.$nextTick()
    console.log(this.$el.textContent) // => 'updated'
  }
}

Vue.js v2 Video Tutorial – The Net Ninja

Vue JS 2 Tutorial #1 – Introduction – The Net Ninja

Adding Instance Properties – Vue JS Cookbook

There may be data/utilities you’d like to use in many components, but you don’t want to pollute the global scope. In these cases, you can make them available to each Vue instance by defining them on the prototype:

Vue.prototype.$appName = 'My App'

Now $appName is available on all Vue instances, even before creation. If we run:

new Vue({
  beforeCreate: function() {
    console.log(this.$appName)
  }
})

Then "My App" will be logged to the console!


Change Vue prototype variable in all components – Stack Overflow


Easy Way to Understand the VueJS Component Lifecycle Hooks – Edutechional

Easy Way to Understand the VueJS Component Lifecycle Hooks – Edutechional

Extend method in Vue v2


Update Entire Observed Array and Trigger Re-render

Vue.js v2 best way to update entire array – Stack Overflow

oldArr = newArr

Read more at: Vue.js v2 Replacing an Array

Another option might be to to empty the array and then push() the new one like:

yourArray.push(... yourNewArray) //pushes all new items

Code source: Stack Overflow comment

Also see Array Change Detection in Vue JS v2 documentation. Sections:

More about Vue watch() outputs same oldValue and newValue – Stack Overflow


Vue watch() outputs same oldValue and newValue – Stack Overflow

  • new Vue, mounted, watch, computed, newVal, oldVal

How to push items into an array in the data object in Vue.js? – The Web Dev

To push items into an array in the data object in Vue.js, we can make a copy of the object to append to the array before we call push with it.

See article for code example.

Call this.queue.push with the copy of the this.purchase object.

Making a copy of the object will mean that only the original this.purchase object when we change the properties in it rather than this.purchase and the item in the this.queue array.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top