vue.js - 如何正确使用 vue draggable 和 vuex？

Question

我是 vue 新手，我正在尝试在我的 vue 应用程序中实现可拖动功能。在这个应用程序中，我使用 vuex、axios 和vuedraggable 包。

这是我的模板和脚本截图

这是脚本部分

我不知道在哪里指定 updateGlobalTodo 方法。我可以使用 patch 方法代替 put 方法来更新吗？

vuex 脚本在这里

这是响应数据格式

Answer 1

您可以添加更改方法来监听可拖动的更改事件并在那里设置更新事件

<div class="col-3">
  <h3>Draggable 2</h3>
  <draggable
    class="dragArea list-group"
    :list="list2"
    group="people"
    @change="updateOrderMethod"
    item-key="name"
  >
    <template #item="{ element }">
      <div class="list-group-item">
        {{ element.name }}
      </div>
    </template>
  </draggable>
</div>

并在方法中添加更新 Vuex：

方法：{ updateOrderMethod：函数（evt）{

  window.console.log(evt); // inside evt variable you can get the item and the index order
  this.updateGlobalTodo();
}   }