vue数据改变渲染问题_vue--渲染后修改数据不刷新

问题： 在使用 vue 进行开发的过程中，可能会遇到一种情况：当生成vue实例后，再次给数据赋值时，有时候并不会自动更新到视图上去。也就是如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

vue遍历数组对象进行渲染

*

{ {item.option_name}}:

有

无

使用Vue.set对数据进行一个强制更改

handleTestClick(item, key, val) {

Vue.set(this.historyNowList, key, this.historyNowList[key])

}

原因： 受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。

所以Vue 不能检测以下变动的数组：

当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue

当你修改数组的长度时，例如：vm.items.length = newLength

例如：使用 this.arr[0] 去更新 array 的内容，视图没有刷新

使用 Vue.set(this.arr, 0,