Как правильно использовать vue draggable с vuex?

#vue.js #vuedraggable

#vue.js #vuedraggable

Вопрос:

Я новичок в vue и пытаюсь реализовать перетаскиваемые функции в своем приложении vue. В этих приложениях я использую пакеты vuex, axios и vuedraggable.

Вот скриншоты моего шаблона и скрипта

введите описание изображения здесь

а вот разделы скрипта

введите описание изображения здесь

Я понятия не имею, где указать метод updateGlobalTodo. Могу ли я использовать метод patch вместо метода put для обновления?

и скрипт vuex здесь

введите описание изображения здесь

и вот формат данных ответа

введите описание изображения здесь

Комментарии:

1. Что ты хочешь обновить, братан?

2. Я хочу обновить порядок

Ответ №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();
}   }