Due to JavaScript limitations, Vue cannot detect changes in the following arrays:
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的When directly setting an array item by index, for example: vm.items[indexOfItem] = newValue
can be used:
Vue.set(vm.items, indexOfItem, newValue); Or: vm.$set(vm.items, indexOfItem, newValue)
vm.items.splice(indexOfItem, 1, newValue)
When modifying the length of the array, for example: vm .items.length = newLength
can be used: vm.items.splice(newLength)
Due to JavaScript limitations, Vue cannot detect the addition or deletion of object properties:
Because Vue will perform getter/setter conversion on properties when initializing the instance, the properties must exist on the data object in order for Vue to convert it to reactive.
var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的For already created instances, Vue does not allow dynamic addition of root-level reactive properties. However, you can use the Vue.set(object, propertyName, value) method to add responsive properties to nested objects.
var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})
Vue.set(vm.userProfile, 'age', 27)Or: You can use the vm.$set instance method, which is just an alias for the global Vue.set:
vm.$set(vm.userProfile,'age', 27)
If assign multiple new properties to an existing object:
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})It may also be because the code written is executed faster than the dom update, you can use this.$nextTick() to delay the code execution until the next dom update.
Like the global method Vue.nextTick(), the difference is that this callback is automatically bound to the instance that calls it.
this.value = '你好啊';
this.$nextTick(() => {
console.log(this.$refs['hello'].innerText);
});Modify the value of the object in the array:
//data中list的值
list: [
{
name:'Lee',
age:20
}
]
//响应式修改值
this.list[0].name = "Joh";
this.$set(this.list,0,this.list[0]);