H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue数据渲染遇到一个bug

问题描述

vue项目

从接口取回的数据,数据格式如下

clipboard.png

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

回答:

因为 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)
})

回答:

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

回答:

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

回答:

VUE数据同步实际上是初始化的时候为每个属性重定义了get和set方法,当数据改变,vue就可以检测到,自己异步添加的属性只能通过vue.set方法添加的才会被添加上set和get方法,才能被vue捕捉到。方法上面的大佬已经提供了。

回答:

从你的截图可以看出,store_list是一个数组。Vue中对数组中的元素赋值不会触发Vue的响应式更新,要修改数组元素的值要用$set,参考下面链接:https://www.cnblogs.com/xiaol…
vue官网文档也有相关说明:https://cn.vuejs.org/v2/guide…
希望能帮到你。

本文地址:H5W3 » vue数据渲染遇到一个bug

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址