解决方案：使用vue.set(target, key, value) 全局函数。
链接： vue官网API.set
完整代码：
html代码
<div v-for="list in data.pointsList">
<div @click="toggleActivate(list, data.pointsList)" :class=" {'active': list.active}">
<div v-text="list.title"></div>
<p ><span v-text="list.points"></span>金币</p>
</div>
</div>
javascript代码
toggleActivate: function(item, list){
var len = list.length;
for(var i=0; i<len ; i++ ){
if(list[i] && list[i].active){
Vue.set( list[i], 'active', false );
Vue.set( item, 'active', true );
this.data.points = item.points;
return;
}
};
Vue.set( item, 'active', true );
}
this.tableData.forEach((v, i) => {
if (v[this.item.primary] === primary) {
// this.tableData.push(form)
// v.des = form.des
// v.post = form.post
// v.number = form.number
this.tableData.splice( i, 1, form )
this.form[this.item.field] = this.tableData
console.log(this.tableData)
}
})
备注： 如果是对象数组数据，类似： [{...},{...},{..}]， 可能会这样想，因为对象是引用类型，所以直接改变对象的值就会触发更新，但是处理过后，页面没有更新。
在官方文档中，对应数组类型数据有详细的说明： 数组更新检测
对数组数据进行修改操作时：只有 push() pop() shift() unshift() splice() sort() reverse() 操作才会触发页面更新视图。
