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

Question

Fiddle:

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

Objective:

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

什么是 v-sortable？

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

问题

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

如何解决？

Answer 1

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

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

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

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