vue2动态改变页面数据结构时，数据没有检测更新

解决方案：使用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() 操作才会触发页面更新视图。