Vue 观察者恢复旧值?

Vue watcher restore old values?

我正在使用此组件制作可排序项目的列表。 https://sortablejs.github.io/Vue.Draggable/#/simple

我有一个数组,其中包含我的视图组件数据中的项目。 然后我使用 v-for 来处理列表,我的数组中的每个项目一行。

所以每次我移动一个项目时,项目数组都会排序并更改数组项目的顺序,这就是该组件的行为。

但我必须 post 调用 api 才能将新订单保存到列表中。 所以我在项目数组上定义了一个观察者,每次它被可拖动组件排序时,如果数组顺序发生变化,我会向 api 发出请求。

当这个请求失败时,问题就来了,我想恢复视图中的旧值,所以我在视图中没有一个订单,另一个不同的订单存储在数据库中。

在我的 watcher 中,我有 prevValues 和 newValues,我用它们来比较和检查项目顺序是否有任何变化,然后发出请求,然后,如果请求失败,则使用 prevValues 恢复数据值数组。

问题是可能会进入无限循环,因为当我恢复旧值时,原始数组的观察者再次被触发,发出请求,失败,恢复值等等。

有没有什么方法可以在不再次触发观察者的情况下恢复传递给观察者的旧值?

谢谢

响应 drag events 触发您的 API 调用比观察数据更可靠。这样您的代码只会响应用户操作。

或者,存储原始数组的副本,并使用类似 deep-equal 的方法将其与最新值进行比较,以确定在调用之前是否已更改。