Vue.js 可排序列表 - 通过 AJAX 更新模型并保存更改位置

Posted 2023-02-22

【中文标题】Vue.js 可排序列表 - 通过 AJAX 更新模型并保存更改位置

【英文标题】：Vue.js Sortable list - updating model and saving position on change through AJAX

【发布时间】：2016-05-16 09:33:43

【问题描述】：

小提琴：

https://jsfiddle.net/fierflash/0h6uL4ek/2/

目标：

当发生重新排序时（通过 Sortable），向后端发送 AJAX 请求以保存任务的新位置

什么是 v-sortable？

http://am2studio.hr/blog/creating-dynamic-table-with-vue-js/

问题

标记已更新，但模型未更新。在这种情况下，重新订购时 task.position 的值保持不变。 $watch 的外观应该如何（如果需要）？我应该输入什么值？

如何解决？

【问题讨论】：

我们可能需要查看您的 javascript 来提供帮助。一个 jsfiddle 会更好。

@DavidK.Hess 当然，添加了一个小提琴，没​​有在那里完成 AJAX，因为我不确定在哪里并且模型现在没有更新。

【参考方案1】：

您使用该方法遇到的主要问题是您试图通过使用input 和type="hidden" 来更新位置。 Vue 的 v-model 不支持该输入类型（不幸的是，在这种情况下也不会发出错误消息）。

既然你只是想在 drop 结束后更新位置，为什么不直接遍历数组然后像这样设置它呢？

that.value.forEach(function (task, index) 
    task.position = index + 1;
);

在这里工作：https://jsfiddle.net/zuwg1dh6/1/