0

我使用这个组件来制作一个可排序项目的列表。 https://sortablejs.github.io/Vue.Draggable/#/simple

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

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

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

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

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

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

有没有办法恢复传递给观察者的旧值而不再次触发观察者?

谢谢

4

1 回答 1

1

对拖动事件做出反应以触发您的 API 调用会比观察数据更可靠。这样,您的代码只会响应用户操作而起作用。

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

于 2020-08-05T14:39:26.887 回答