Vue перетаскиваемый без обновления индекса - PullRequest
Новая
       72

Vue перетаскиваемый без обновления индекса

0 голосов
/ 28 февраля 2020

Я использую Vue перетаскиваемый для перетаскивания списков между категориями: 

<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
         ...
      },
   }
   ....
});

Из-за группы во внутреннем перетаскиваемом я могу перетаскивать между категориями. Но внешнее перетаскивание не работает, метод изменения не вызывается. Когда я вместо этого использую изменение, категории действительно перемещаются, и функция вызывается, НО индекс в l oop не обновляется.

Значит: Initial 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)

Таким образом, я не могу отправить новый индекс в базу данных, значит, когда я перемещаю категории и повторно ссылаюсь sh, он возвращается в исходное состояние.

1 Ответ

0 голосов
/ 28 февраля 2020

вы не привязываете категории к внешнему перетаскиваемому элементу, добавление v-модели к первому перетаскиваемому элементу устранит проблему, v-model = "Categories"

также Использование правильной клавиши в списке может помочь, Vue нужен ключ для определения любых изменений в списке

...