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官方文档中有详细说明，有空还是认真读一遍文档吧