vue数据渲染遇到一个bug

Question

问题描述vue项目从接口取回的数据,数据格式如下然后赋值给组件data中的cashData,应为交互中要用,所以给数组中的每个item添加一个变量,,v-for循环cashData,,渲染出来的效果如下:,点击门店名称,修改showProInfoFlag为false,发现页面并没有改变但是通过控制台打印,发现数据其实已经变化了,是vue没有监听到吗?

Answer 1

因为 Vue 无法探测普通的新增属性 

问题在于下面这句：

this.cashData.forEach((item)=>{

    item.showProInfoFlag = true;

})

因为 你在data里声明了cashData的值 所以cashData已经是响应式的 this.cashData = data 这句话 vue会递归将数据包装成响应式数据

但是你这个数据之前data应该没有这个showProInfoFlag值 所以这里没有监听到，通过item.showProInfoFlag只是单纯的对象赋值

总结成下面：

this.cashData = 1 

//这个可以监听到 因为cashData已经是响应式 

this.cashData = {}

this.cashData.showProInfoFlag = 1;

//不可以监听到 因为vue不知道你有showProInfoFlag 这个属性

this.cashData = {showProInfoFlag:''}

this.cashData.showProInfoFlag = 2;

//可以监听到 因为vue知道你有showProInfoFlag 这个属性

你一调换一下位置：

data.forEach((item)=>{

    item.showProInfoFlag = true;

})

this.cashData = data;

或者：

this.cashData.forEach((item)=>{

    this.$set(item,'showProInfoFlag',true)

})

Answer 2

楼上正解，因为vue里面对象是被数据劫持的，所以它有专门的$set的方法来处理对象赋值的问题

Answer 3

这是VUE中的一个坑，不过VUE官方文档中有详细说明，有空还是认真读一遍文档吧