【发布时间】：2020-11-25 18:14:26
【问题描述】：
我使用这个组件来制作一个可排序项目的列表。 https://sortablejs.github.io/Vue.Draggable/#/simple
我的视图组件数据中有一个包含项目的数组。 然后我使用 v-for 来绘制列表，数组中的每个项目一行。
所以每次我移动一个项目时，项目数组都会被排序并改变数组项目的顺序，这就是这个组件的行为。
但我必须对 api 进行后调用才能将新订单保存到列表中。 所以我在项目数组上定义了一个观察者，每次它被可拖动组件排序时，如果数组顺序发生变化，我会向 api 发出请求。
当这个请求失败时问题就来了，我想恢复视图中的旧值，所以我在视图中没有一个订单，而另一个不同的订单存储在数据库中。
在我的观察者中，我有 prevValues 和 newValues，我用它们来比较和检查项目顺序是否有任何变化，然后发出请求，然后，如果请求失败，则使用 prevValues 数组恢复数据值。
问题是可能会陷入无限循环，因为当我恢复旧值时，会再次触发原始数组的观察者，发出请求，失败，恢复值等等。
有什么方法可以恢复传递给观察者的旧值而不再次触发观察者？
谢谢
【问题讨论】：
-
你能不能在
dragend定义更新函数而不是看数组。或者你可以在发送请求之前编写一个条件来检查数组是否发生了变化。 -
当你在每次排序后分配一个浅拷贝时，你可以在 (prev == current) 时退出观察者
-
我每次在发送请求之前都会检查是否有更改。但是 vue draggable 修改了我的项目数组，当我尝试恢复旧值时，我存储了新值，因此它再次触发了观察者。我没有尝试 dragend 功能，也许它可以工作。谢谢。
-
在第二次迭代中，prevValues 是新的，因此恢复 olvalues 算作对我的数据的更改。
-
在发出请求时，您可以检查是否设置了标志，只有在没有错误响应时才会设置该标志。如果有错误响应，它会简单地跳过发出请求并更新值。
标签： vue.js vuedraggable