Vue的computed计算属性监听不到数组或者对象属性的变化
data里面是这样定义arr:[],obj:{}在methods中的某个事件会改变数组/对象中的元素clickBtn () { this.arr[0] = false 或this.arr = [false]}//或者clickBtn () { this.obj = { test:12312 } 或 this.obj.test =12312}但在computed中监听不到这个数组中元素的
·
data里面是这样定义
arr:[],
obj:{}
在methods中的某个事件会改变数组/对象中的元素
clickBtn () {
this.arr[0] = false 或this.arr = [false]
}
//或者
clickBtn () {
this.obj = {
test:12312
}
或
this.obj.test =12312
}
但在computed中监听不到这个数组中元素的变化
isAble() {
//数组
if (this.arr[0]) {
return true;
}
//或者
if (this.obj.test) {
return true;
}
//对象
if (this.obj.test) {
return true;
}
//或者
if (this.obj) {
return true;
}
}
解决办法就是在methods中这样写
methods: {
clickBtn () {
this.$set(this.arr, 0 ,false)或
this.$set(this.obj, “test” ,12312)
}
}
//或者
computed: {
testComData: {
get() {
return //数组
if (this.arr[0]) {
return true;
}
//或者
if (this.obj.test) {
return true;
}
//对象
if (this.obj.test) {
return true;
}
//或者
if (this.obj) {
return true;
}
},
set(newVal) {
this.$set(this.arr, 0 ,newVal)或
this.$set(this.obj, “test” ,newVal)
}
}
}
自己在vue的官方文档里computed这块,没有找到对应的解释。但是后来又找了下,发现其实是有相关的解释的:
对象:
向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = ‘hi’)
数组:
Vue 不能检测以下数组的变动:
当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如:vm.items.length = newLength
为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果,同时也将在响应式系统内触发状态更新:
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
更多推荐
已为社区贡献1条内容
所有评论(0)