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更新视图的，而单纯的赋值则不会。