问题描述：

使用uniapp写项目的时候, 碰到一个问题, 给后端传来的对象数组中的对象添加属性时, 无法实现动态响应, 以为是uniapp内部的问题, 于是我将同样的代码在vue中运行(uniapp和vue语法相同), 依然无法实现动态响应

<template><div class="type-chose"><div class="type-chose-left"><divv-for="item in dataList":class="item.chose_status === true ? 'itemActive' : ''"@click="dealItemClick(item)":key="item.id">{{item.name}}</div></div></div>
</template><script>export default {name: "Test1",data() {return {dataList: [{"id": 1,"name": "小时工",},{"id": 2,"name": "开荒保洁",},{"id": 3,"name": "擦玻璃",},{"id": 4,"name": "除甲醛",},],}},mounted() {for (let obj of this.dataList) {obj.chose_status = false;}},methods: {dealItemClick(item) {item.chose_status = true;for (let obj of this.dataList) {if (obj !== item) obj.chose_status = false;}console.log(this.dataList);},},}
</script>

预期功能：

点列表中的某个选项, 样式改变

实际结果：

点击最后一个选项, chose_status为true, 但是样式没有发生改变

原因分析：

查阅vue官方文档:vue的响应式底层原理
关键点是:
由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。
对于对象: Vue无法检测 property 的添加或移除, 由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。
也就是说: 如果你在Vue实例化后, 再为某一个对象进行增加或删除属性, 那么vue就无法让这个属性变为响应式的, 上述代码中, 由于是后来才对这个对象数组中的对象进行增加属性, 所以chose_status这个属性不是响应式的, 所以点击某个选项, 样式没有改变。

解决方案：

使用

Vue.set(object, propertyName, value)

或

this.$set(object, propertyName, value)

为对象添加响应式属性。修改mounted中的代码如下:

 for (let obj of this.dataList) {this.$set(obj, 'chose_status' ,false);}

这是对于对象的属性添加, 对于数组的, 查阅官方文档即可, 当然这个功能也可以使用activeId来实现。

解决Vue中的对象属性无法实现动态响应相关推荐

vue 修改对象的值视图没有发生改变_在vue中处理对象属性改变视图不更新问题？ - echart...
...图等等,但是这些代码比较难写,因此我们通常会用借助echarts,那你知道如何使用echarts吗?这篇文章就和大家讲讲echarts的使用方法,有一定的参考价值,感兴趣的朋友可以看看.以饼状图 ...
解决 vue中props对象中设置多个默认值问题
1.遇到问题: props中设置了默认值,但是获取时(获取父页面没有传的属性) 打印出来是undefined 子组件 props: { paramsObj: {type:Object,default: ...
Vue中判断对象属性是否存在
//判断属性是否存在 if (!this.user.age) {//参数:对象,要添加的属性名,属性值this.$set(this.user, "age", 20) } else ...
解决vue中对象属性改变视图不更新的问题
解决vue中对象属性改变视图不更新的问题参考文章: (1)解决vue中对象属性改变视图不更新的问题 (2)https://www.cnblogs.com/buxiugangzi/p/12050165 ...
vue本地没事放到服务器上无限循环,解决vue中的无限循环问题
项目中遇到了这样一个问题:每一种产品有对应的服务费,每一个商家有多种商品要单独计算每一家的服务费,最后汇总总的服务费用.我直接写了一个方法来计算出每个商家和总的服务费用并return出来.如果不看控制 ...
vue中的ref属性
vue中的ref属性使用vue开发时经常会用到ref属性,ref属性有什么作用呢?我刚开始用的时候发现这个属性有点鸡肋,总是感觉可有可无,但是随着不断的使用vue,慢慢地发现它的作用还是挺重要的 ...
解决vue中绝对定位或固定定位在底部的按钮随键盘移动的问题
解决vue中绝对定位或固定定位在底部的按钮随键盘移动的问题参考文章: (1)解决vue中绝对定位或固定定位在底部的按钮随键盘移动的问题 (2)https://www.cnblogs.com/zlfP ...
[vue] vue中data的属性可以和methods中的方法同名吗？为什么
[vue] vue中data的属性可以和methods中的方法同名吗?为什么源码中的 initData() 方法 if (methods && hasOwn(methods, ke ...
ES6中object对象属性
//es5中定义对象属性要么字面量.要么点.要么[],变量与空格在这些方法中没有得到好的支持 /在es6中可以这么定义: let w='www'; let obj1={w};//obj1={w:'ww ...
解决vue中axios同步的问题
解决vue中axios同步的问题参考文章: (1)解决vue中axios同步的问题 (2)https://www.cnblogs.com/zhupanpan/p/11319305.html 备忘一下 ...

解决Vue中的对象属性无法实现动态响应