2022-10-09 vue 修改数组对象中的属性值，视图没有同步更新

请使用vue提供的$set()方法

注：本文仅针对数组嵌套对象的数据来展开讨论。

问题：修改数组对象中的属性值，视图没有同步更新，但实际上已经修改了数据。

原因：vue的设计导致的。

例子：

let data2 = [
{
    value: 1,
    status: false,
},
{
    value: 2,
    status: true,
},
];

比如我先把data2里面的第一项的字段改成true，你或许会写：

data2[index].status = !data2[index].status;

但是这样并不能响应式地更新视图，请看解决方案：

解决方案：

this.$set(data2[index], "status", !data2[index].status);

看一下官方描述：

Vue.set( target, propertyName/index, value )
参数：

{Object | Array} target
{string | number} propertyName/index
{any} value

返回值：设置的值。

用法：

向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi')

注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。

this.$set(目标值（data2）, 属性值（status）, 新属性值（true）);

2022-10-10 
今天发现uniapp的picker组件修改数据时不能响应式更新form表单，而解决方案和上面一样可以通过$set来赋值。