vue中使用v-for渲染的列表当某项数据变动时视图列表没有更新问题解决

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

例如视图中的列表：

<tr v-for="vo in indexData.list"> 
    <td>{{vo.code}}</td> 
    <td>{{vo.username}}
    </td> <td>{{vo.cTime}}</td> 
</tr>

渲染的是以下数据：

// 视图列表数据
indexData:{
    total: 20,
    list: [
	{
         "id": 101,
         "username": "捷德",
         "code": "175264",
         "cTime": "2019-07-13 00:00",
       },
       {
         "id": 102,
         "username": "迪迦",
         "code": "192436",
         "cTime": "2019-07-05 00:00",
       }
    ]
}

当在视图列表中点击操作按钮，对某条记录比如修改后，后台会返回修改后的那条数据，这时候我理所当然的想法是，利用返回数据的id在list中找到那条数据直接替换，即这样的思路 list[index] = newVal

事实上这样的操作行不通，查找资料说是vue无法监听到复杂数据类型内部的数据变化。 需要采用如下的操作：

Vue.set( target, key, value ) // 在methods中的写法 
this.$set( target, key, value)

那这样情况下，就用forEach找到indexData.list中的修改的那条数据重新赋值即可：

this.indexData.list.forEach((item,index)=>{
    if(item.id === back_data.data.id){
    	//下面注释掉的这种形式视图是无法更新的
        //this.indexData.list[index] = back_data.data;
        
		//应该用如下种操作
        this.$set( this.indexData.list, index, back_data.data)
    }
});

经测试完全没有问题，修改数据后，修改的那条数据一旦返回立马更新。