computed计算属性监听不到数组或者对象的变化

您所在的位置：网站首页 › computed监听vuex › computed计算属性监听不到数组或者对象的变化

computed计算属性监听不到数组或者对象的变化

#computed计算属性监听不到数组或者对象的变化| 来源: 网络整理| 查看: 265

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中这样写

clickBtn () { 　　this.$set(this.arr, 0 ,false)或　　this.$set(this.obj, “test” ,12312) }

自己在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)

【本文地址】

computed计算属性监听不到数组或者对象的变化

computed计算属性监听不到数组或者对象的变化

今日新闻

推荐新闻