Vue 可拖动不更新索引

Question

我正在使用 Vue draggable 在类别之间拖动列表：

<draggable v-bind="dragOptions" @change="dragCat">
   <div v-for="cat in categories" :key="cat.id">
      <draggable v-model="cat.lists" v-bind="dragOptions" 
         group="categories" @change="dragList(cat)">
         <div v-for="list in cat.lists" :key="list.id">
            {{list.title}}
         </div>
      </draggable>
   </div>
</draggable>

import draggable from "vuedraggable";
var vm = new Vue({
   el: "#app",
   components: {
      draggable
   },
   data() {
      return {
         categories: [
            {lists: [{title: "A"}, {title: "B"}]},
            {lists: [{title: "C"}, {title: "D"}]},
            {lists: [{title: "E"}, {title: "F"}]},
         ],
      }
   },
   methods: {
      dragCat() {
         // Loop through categories with index
         ...
      },
      dragList(cat) {
         // Loop through cat.lists with index
         ...
      },
   }
   ....
});

因为内部可拖动的组，我可以在类别之间拖动。但是外部可拖动不起作用，不会调用更改方法。当我改为使用 change 时，类别确实被移动并且函数被调用但循环中的索引没有更新。

表示：初始 0(A,B) - 1(C,D) - 2 (E,F) 我将切换 0 和 1：预期：0(C,D) - 1(A,B) - 2(E,F) 现实：1(C,D) - 0(A,B) - 2(E-F)

所以我无法向数据库发送新索引，这意味着，当我移动类别并刷新时，它又回到了初始状态。

Answer 1

您没有将类别绑定到外部可拖动对象，将 v-model 添加到第一个可拖动对象将解决此问题，v-model="categories"

此外，在列表中使用正确的键可能会有所帮助，Vue 需要该键来识别对列表的任何更改

Vue 可拖动不更新索引

Vue draggable not updating index

javascript

onchange

vue.js

v-for

vuedraggable