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

标签 javascript ajax laravel-5.1 jquery-ui-sortable vue.js

fiddle :

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

目标:

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

什么是 v-sortable?

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

问题

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

如何解决这个问题?

最佳答案

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

既然你只是想在下降结束后更新位置,为什么不直接遍历数组并像这样设置它呢?

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

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

关于javascript - Vue.js 可排序列表 - 通过 AJAX 更新模型并保存更改位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35240552/

相关文章:

php - 验证用户 : laravel 5. 1 中的问题

javascript - 如何观察javascript数组中对象的变化?

javascript - 在 JavaScript 代码中从 Controller 调用函数

javascript - 从客户端隐藏 API key

javascript - 将文本区域的内容保存到文件并从 PHP 服务器页面加载

mysql - 返回具有多个模型的JSON响应

javascript - Gulp 卡住观察代码并重新加载更改

javascript - 在 cookie 中存储带有特殊字符的 javascript 数组

android - Phonegap/ Cordova : get images from server

javascript - 如何在 Laravel 5.1 中将变量值从 JavaScript 发送到 Controller