如何在商店中同步 vuedraggable 列表和我的列表

问题描述

我想在使用 vuedraggable 拖放后更新我的主列表顺序。

第一次尝试

所以我的代码如下：

<draggable v-model="draggablePriorites" handle=".move" v-bind="dragOptions" @start="drag = true" @end="drag = false">
   <transition-group type="transition" :name="!drag ? 'flip-list' : null">
      <el-col v-for="priorite in priorites" :key="priorite.ordre" :span="4">
       </el-col>
   </transition-group>
</draggable>

在这个配置中一切看起来都很好，但是顺序的变化永远不会在数据库中持久化，变化只是视觉上的。

第二次尝试

所以我尝试在放下组件时更改顺序：

<draggable v-model="draggablePriorites" handle=".move" v-bind="dragOptions" @start="drag = true" @end="changeOrder($event)">
   <transition-group type="transition" :name="!drag ? 'flip-list' : null">
      <el-col v-for="priorite in priorites" :key="priorite.ordre" :span="4">
       </el-col>
   </transition-group>
</draggable>

我的函数调用mutation并改变store中的顺序

changeOrder(event) {
  this.drag = false
  this.changePrioriteOrder({ beforeIndex: event.oldindex + 1,afterIndex: event.newIndex + 1 })
}

突变

changePrioriteOrder(state,{ beforeIndex,afterIndex}) {
_.forEach(state.priorites,function(priorite) {
  if (priorite.ordre === beforeIndex) {
    priorite.ordre = afterIndex
    return
  }
  if (beforeIndex < afterIndex) {
    if (priorite.ordre > beforeIndex && priorite.ordre <= afterIndex) {
      priorite.ordre = priorite.ordre - 1
    }
  } else {
    if (priorite.ordre >= afterIndex && priorite.ordre <= beforeIndex) {
      priorite.ordre = priorite.ordre + 1
    }
  }
})

}

在这种情况下，订单的更改会持续到数据库中，但是当我放下组件时，它会返回到其初始位置。

第三次尝试

功能上的一点变化

changeOrder(event) {
  this.drag = false
  this.changePrioriteOrder({ ordreAvant: event.oldindex + 1,ordreApres: event.newIndex + 1 })
  this.draggablePriorites = this.getFeuilleDeRoutePriorites
}

同样的问题，组件返回到它的初始位置，但存储中的顺序更改是有效的并持久化到数据库中。

有人知道如何同步可拖动列表和商店列表吗？

也许我对 vuedraggble 组件有什么不理解

谢谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

vue.js vuedraggable