object property Change page in Vue array does not render problem

CheckBox Multi-Select function when encountered a pit, logic how to see all right, but there is a bug, and finally found that the array where the value changed the page tick is not re-rendered.

Changed the keyword search to find the relevant method.

In fact, before reading the document tutorial saw here, but only after the real use will have the most direct feeling.

-------------------------------------------

Array update detection Mutation method

Vue contains a set of variations that watch arrays, so they will also trigger view updates. These methods are as follows:

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

You open the console and then use the array of the previous example to items invoke the mutation method: example1.items.push({ message: ‘Baz‘ }) .

Replace array

Mutation methods (mutation method), as the name implies, change the original array that is called by these methods. In contrast, there are also non-variant (Non-mutating method) methods, such as: filter() , concat() and slice() . These do not change the original array, but always return a new array. When using a non-mutating method, you can replace the old array with a new array:

Example1.items = Example1.items.filter (function (item) {return Item.message.match (/foo/) })

You might think that this will cause Vue to discard the existing DOM and render the entire list again. Fortunately, that's not the case. Vue implements some intelligent, heuristic methods for maximizing the reuse of DOM elements, so it is very efficient to use an array with the same elements to replace the original array.

Precautions

Because of JavaScript limitations, Vue cannot detect an array of the following changes:

1. When you use an index to set an item directly, for example:vm.items[indexOfItem] = newValue
2. When you modify the length of an array, for example:vm.items.length = newLength

In order to solve the first kind of problem, the following two ways can be achieved and vm.items[indexOfItem] = newValue the same effect, but also trigger the status update:

//Vue.set Vue.set (Example1.items, Indexofitem, NewValue)

//Array.prototype.spliceExample1.items.splice (Indexofitem, 1, NewValue)

To solve the second type of problem, you can use splice :

Example1.items.splice (Newlength)

Object Change Detection considerations

Or because of JavaScript limitations, Vue cannot detect the addition or deletion of object properties:

var vm = New Vue ({data: {A: 1}}) //' VM.A ' is now a responsive vm.b = 2//' VM.B ' is not a reactive type

Vue cannot dynamically add a root-level response property to an instance that has already been created. However, you can use Vue.set(object, key, value) methods to add a responsive property to a nested object. For example, for:

var vm = New Vue ({data:{userprofile:{name: ' Anika ' ) }}})

You can add a new age property to the nested userProfile object:

Vue.set (Vm.userprofile, ' age ', )

You can also use vm.$set an instance method, which is just Vue.set a global alias:

this. $set (this.userprofile, "age", )

Sometimes you may need to assign several new attributes to an existing object, such as use Object.assign() or _.extend() . In this case, you should create a new object with a property of two objects. So, if you want to add a new responsive property, don't look like this:

object.assign (this.userprofile, {age: favoritecolor: ' Vue Green ' })

You should do this:

this.userprofile = object.assign ({}, this.userprofile, {age: favoritecolor: ' Vue Green ')

object property Change page in Vue array does not render problem