时间戳

首页 > 解决方案 > Vue可拖动不更新索引

javascript - Vue可拖动不更新索引

问题描述

我正在使用 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
         ...
      },
   }
   ....
});

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

表示：初始 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(EF)

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

标签： javascriptvue.jsonchangev-forvuedraggable

解决方案

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

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

推荐阅读