Vue 数组删除和修改元素后页面立即刷新
数组删除和修改元素后页面立即刷新
·
需求:页面立即刷新
vue 页面点击删除和修改后,数据不能够立马刷新,原因很简单:点击页面操作,分别调用删除和修改的后台方法成功后数据库数据是成功了,但是前端页面并没有拿到删除数据后的新数组和修改数据后新的数组。所以就是一个新数组赋值数组然后展示的问题。
添加:后台返回新增的数据(新对象reponse.data
),新增的数据push后在赋值数组。
this.mainList.push(reponse.data);
删除:利用过滤器来做,利用删除数据的id
this.mainList = this.mainList.filter(item=>item.id != data.id);
修改:后台返回修改的数据(新对象reponse.data
),把修改数据的id找到,然后原数组过滤这个id,找到旧的对象然后拿新对象赋值给旧对象。
this.mainList = this.mainList.map((item) => {
if(item.id == id){
return item = reponse.data;
}
})
更多推荐
已为社区贡献2条内容
所有评论(0)