Как использовать Vue, Vuex и vuedraggable вместе? - PullRequest
Новая
       107

Как использовать Vue, Vuex и vuedraggable вместе?

1 голос
/ 24 февраля 2020

Я создаю приложение, используя Vue, Vuex и vuedraggable. Данные в хранилище выглядят следующим образом: 

 lists: [
      [
        {
          group: 0,
          order: 1,
          text:
            "Uses both hands to reach for, and grasp, objects. Will occasionally use one hand."
        }
      ],
      [
        {
          group: 1,
          order: 2,
          text: "Uses pincer grasp with thumb and index finger."
        },
        {
          group: 1,
          order: 3,
          text: "Transfers objects from one hand to the other."
        }
      ],
      [
        {
          group: 2,
          order: 4,
          text: "Picks up small objects quickly using fine pincer grasp."
        },
        {
          group: 2,
          order: 5,
          text: "Turns two or three pages of a book at a time"
        },
        {
          group: 2,
          order: 6,
          text:
            "Holds pencil at middle or top with whole hand or attempt at thumb and fingers grip"
        },
        {
          group: 2,
          order: 7,
          text: "Scribbles"
        },
        {
          group: 2,
          order: 8,
          text: "Beginning to show favoured hand"
        }
      ]
]

Фактический список содержит немного больше данных.

Пока что я рандомизирую данные и делю их на 7 отдельных массивов. Пользователь может перетаскивать элементы между этими списками, и данные хранилища должны отражать эти изменения. Эти 7 затем отображаются так в 7 отдельных компонентов перетаскивания: 

<template>
  <div class="draggable-list-container">
    <div
      class="draggable-list-inner-container"
      v-for="(statementOuter, indexOutDrag) in list"
      :key="indexOutDrag"
    >
      <h1>{{ titles[indexOutDrag] }}</h1>

      <draggable
        v-model="list"
        @change="log"
        :emptyInsertThreshold="150"
        v-bind="dragOptions"
        class="list-group"
      >
        <transition-group name="flip-list" type="transition">
          <div
            v-for="statementInner in statementOuter"
            :key="statementInner.order"
            class="drag-item flex flex-justify-betweeen"
            :data-val="statementInner.group"
          >{{ statementInner.order }}: {{ statementInner.text }}</div>
        </transition-group>
      </draggable>
    </div>

    <div class="submit-button-container">
      <button class="btn" @click="revealAnswers">Reveal answers</button>
      <button class="btn" @click="accessible">Accessible version</button>
    </div>
  </div>
</template>

Однако, когда элемент перемещается, кажется, что весь массив перемещается в другие перетаскиваемые списки. И иногда кажется, что он полностью разрушает некоторые массивы.

Использование отладки Vuex на chrome, кажется, показывает, что он создает 2 новых массива, а затем оба массива удаляются. Кажется, что эти два массива содержат элемент, предназначенный для переключения.

Удаление v-модели исправляет это, однако мне нужна v-модель, чтобы держать данные в хранилище в актуальном состоянии в соответствии с текущим расположением элементов в массив.

Я не уверен, что вызвало это и где я иду не так. Буду признателен за любые предположения о том, где может быть моя ошибка.

Все приложение можно увидеть по этой ссылке песочницы кода: https://codesandbox.io/s/4462-392-vuex-testso-wc8nd

...