先举个栗子
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 视图层不更新值的变化
vm.items.length = 2 // 视图层不更新值的变化
由于 JavaScript 的限制,Vue视图层不能检测以上变动的数组
当你利用索引直接设置一个项时
例如:vm.items[indexOfItem] = newValue
解决办法:
// Vue.set
Vue.set(vm.items, indexOfItem, newValue);
或者
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue);
你也可以使用 vm.$set
实例方法,该方法是全局方法 Vue.set 的一个别名:
vm.$set(vm.items, indexOfItem, newValue)
当你修改数组的长度时
例如:vm.items.length = newLength
// Array.prototype.splice
vm.items.splice(newLength)
注:splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
我在项目中是这样解决的
data() {
return {
form: {
uid: null,
roleName: '',
summary: '',
categoryMenuUids: [] //
}
form.categoryMenuUids值变化后,发现数据并没有更新。
handleEdit: function(row) {
...
this.form.categoryMenuUids = newValue;
}
因为这个是属于form中的 categoryMenuUids 的变化,并不能使vue监听到变化,所以就不能改变。所以需要添加监听,deep = true
watch: {
'form': {
handler(newVal, oldVal) {
console.log('value changed', newVal, oldVal);
},
deep: true
}
}