vue 数据更新

[yantianqi]

例如列表数据，增加或删除后向后台发送 ajax,删掉数据。
前台列表数据一般怎么来更新呢？
列表数据是数组，增加后，新数据 push 进数组？
删除后，从数组中删掉某个元素？

[lgh]

不需要你自己动列表数据，向后台发完增删改请求，响应回来之后再请求一次列表数据就行了。

[IceBay]

感觉楼上的解决方案太粗糙了。反正我是往里 push 数据的。

[mokeyjay]

你的想法是正确的

[er567]

看你们接口是什么样子呗，本地操作完数据在请求接口修改后端数据

[zhlssg]

1L 的办法才是最正确的吧，如果有分页的话，数据都变了，肯定要以后端数据为准啊

[murmur]

理论上虚拟 dom 如果有 key 在 pc 端的话只要带分页不会有太多性能问题
mobile 上的 batch insert 才是卡到绝望

[yantianqi]

@lgh 在 then 里面再写一个 ajax 请求一次吗？

[zhwithsweet]

前端只需要，提交 post，put，delete，请求，删除是后台操作数据库，然后，请求成功后再 get 列表数据，就行了。

[loveCoding]

重新请求列表数据

[attackonFourier]

这个分两个来讨论
1，存在分页 ：添加以后重新请求 backend api，因为这里的项会有 id 这样的后台 key 值
2. 不存在分页：比如说添加地址，就五个地址。你就可以靠 vue 的 vm 去重新渲染，只需要使用数组的变异方法即可，例如 push,pop,shift 之类的，纯函数的方法是不行的。如果你是直接设置索引来添加项，Vue.set(example1.items, indexOfItem, newValue)这样是可以的。

[yantianqi]

@zhwithsweet 重新请求在 then 里面请求？

[newlyDawn]

如果涉及到其他数据的改变，没保险的方法就是通过提交后台接口更改数据后重新拉取数据。前端直接更改 vue 的 data 只是在视觉上进行了改变，不能保证整个数据的完整与准确性，好处是去掉了后台数据请求的时间请求

[zhwithsweet]

贴下代码
async handEvent() {
let resp = await postEvent(this.handingParams)
if (resp.result === '0') {
this.$message({
title: '提示',
message: '成功',
type: 'success',
duration: NOTIFY_CLOSE_TIME
})
// 如果 post 请求成功之后，在这里重新请求列表数据
this.fetchEventList()
} else if (resp.result === '1') {
this.$message.info({
message: '已提交至审核',
duration: NOTIFY_CLOSE_TIME
})
} else if (resp.result === '-1') {
this.$message.error({
message: '失败',
duration: NOTIFY_CLOSE_TIME
})
}
return resp
},