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

Logo

前往低代码交流专区

更多推荐