Vue的data中对象新增属性后，页面却不渲染（未渲染）

前提背景：

在data中定义了一个数组 usableList: [],给数组中的每个对象添加checked属性（用来查看数据的勾选状态）

 

问题：

勾选后，数组的数据已经改变了，但是未渲染到页面中

 

问题原因：

在于在Vue实例创建时，对象新增的属性并未声明，因此就没有被Vue转换为响应式的属性，自然就不会触发视图的更新。

 

解决方法一：

使用Vue的全局api $set()

this.$set(item, 'saveMoney', f.saveMoney)

 

解决方法二：

先给附一个默认值

_this.usableList = _this.usableList.map((item) => ({ ...item, checked: false }))

后续在该就可以渲染到页面中了