vue 数据更新

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2282 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

列表

数据

数组

删除

13 条回复 • 2018-01-17 10:36:13 +08:00

lgh

2018-01-16 22:06:28 +08:00 via iPhone

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

IceBay

2018-01-16 22:12:49 +08:00

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

mokeyjay

2018-01-16 22:15:09 +08:00

你的想法是正确的

er567

2018-01-16 22:19:01 +08:00

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

zhlssg

2018-01-16 22:29:25 +08:00

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

murmur

2018-01-16 22:32:06 +08:00

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

yantianqi

2018-01-16 22:34:19 +08:00 via Android

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

zhwithsweet

2018-01-16 22:38:32 +08:00 via iPhone

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

loveCoding

2018-01-16 22:41:11 +08:00

重新请求列表数据

attackonFourier

2018-01-16 23:18:39 +08:00

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

yantianqi

2018-01-17 06:47:10 +08:00 via Android

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

newlyDawn

2018-01-17 09:17:41 +08:00

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

zhwithsweet

2018-01-17 10:36:13 +08:00

贴下代码
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
},