vue2更新数据状态的时候页面数据没有响应

记录一下写项目的时候遇到的问题  2024-7-13

问题描述

如图所示，selectedItems是绑定了表格数据的数组，定义在data中，res.data.result.records是接口返回的列表数据，getdatatransfortree方法将数据做转换

希望的效果是，通过点击事件将当前行数据传递到方法中，在方法中修改nodeStatus的值，从而切换子组件的状态

方法中如下设置

遇到的问题是，方法中打印出来的数值显示nodeStatus状态已经改变了，但是页面上就没有相应的显示。初步判断为响应式的问题。

解决方法

方法一：先调用方法处理好数据，再将数据赋值给变量

方法二：方法中添加新属性的时候使用set

解释

可以理解为这是规定，因为vue2.0用的是defineProperty去做响应，所以监听不了太深层的数据。如果selectedItems已经被赋值了，然后将赋值后的数组传入方法，那在方法中新增的属性就不会被vue监听，这也是导致数值变化但是页面数值没转换的原因。

两个解决方法中，第一个，先处理后才赋值给selectedItems。第二个是方法中在新增属性的时候使用set，可以理解为这个方法是将这个属性添加到vue的监控范围中，这样就可以直接在方法中修改属性。