vue之table初始化后修改单条数据视图不更新的问题总结

vue之table初始化后修改单条数据视图不更新的问题总结

问题场景：
当ajax请求请求到后台数据后，我们仍然有需求修改该数据中某条数据，而使用如下星号包围代码的方法实时更新不了视图。

vue中：
data(){
listData: []
}
created : {
this.initdata()
}
methods ： {
initData() {
var that = this
getOrderDetails(orderNo)
.then(data => {
that.listData = data.list
***that.listData[0].name = 'zhangsan'***
})
.catch(err => {
console.log(err)// 错误信息
})
}
}

此时，我们要实时更新视图的话，就要使用数组变异方法：

push() 往数组最后面添加一个元素，成功返回当前数组的长度
pop() 删除数组的最后一个元素，成功返回删除元素的值
shift() 删除数组的第一个元素，成功返回删除元素的值
unshift() 往数组最前面添加一个元素，成功返回当前数组的长度
splice() 有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除
后想要在原位置替换的值（可选）
sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组
reverse() 将数组倒序，成功返回倒序后的数组

当listData中的数据的结构为：

{ ‘‘name: zhaoliu’’, ‘‘name: lisi’’, ‘‘name: wangwu’’}

我们上面的需求将“***”星号包围代码修改为:

that.listData.splice(0,1,'zhangsan')

当listData中的数据的结构为 ：

{{object1},{object2}, ‘obkect3’}

我们上面的需求将“***”星号包围代码修改为:

const objectTemp = that.list[0]
objectTemp.name = 'zhangsan'
that.listData.splice(0,1, objectTemp)

这样，我们的视图即可得到实时更新，此外注意数组变异方法都是可以出发vue更新视图的，而单纯的赋值则不会。