Перетаскиваемый, не применяемый к вложенному компоненту

#javascript #vue.js #vuejs2 #vue-component

Вопрос:

У меня есть шаблон, который не отображается внутри моего vuedraggable. Есть идеи, почему?

InventorySectionGroup.vue :

 <template>
  <!-- this div renders -->
  <div class="inventory-section-group">
    <p>{{ itemSectionGroupProps.itemSectionCategoryName }}</p>
    <div
      v-for="group in itemSectionGroupProps.itemSectionCategoryItemList"
      :key="group.itemSectionCategoryId"
    >
      <inventory-section-group-item :itemDataProps="group">
      </inventory-section-group-item>
    </div>
    <!-- div doesn't render :-(
      <draggable v-model="itemSectionGroupProps.itemSectionCategoryItemList">
      <transition-group>
        <div
          v-for="group in itemSectionGroupProps.itemSectionCategoryItemList"
          :key="group.itemSectionCategoryId"
        >
          <inventory-section-group-item :itemDataProps="group">
          </inventory-section-group-item>
        </div>
      </transition-group>
    </draggable> -->
  </div>
</template>

Исправлены ошибки, связанные с комп. в этом:

https://codesandbox.io/s/y2cur?file=/src/components/InventorySectionDraggable.vue

Вложенный dnd может быть реплицирован следующим образом:

https://codesandbox.io/s/priceless-perlman-n6psw?file=/src/components/MyContainer.vue

Ответ №1:

У вас есть несколько ошибок в коде (консоль браузера ESLint), попробуйте их исправить, это выделит несколько проблем, которые могут быть заблокированы в какой-то момент.

Что касается вашей текущей проблемы, у вас действительно есть дублированный код: блок, который отображается, и блок, которого нет. Это происходит из-за того, что :key потребности должны быть уникальными. Поскольку ваш код одинаков для 2 блоков, ключ дублируется, и, я думаю, отображается только один.

Если вы возьмете второй блок с этим

 <div :key="group.itemSectionCategoryId">

И обновите его до какого-нибудь наивного уникального ключа, подобного этому

 <div :key="`${group.itemSectionCategoryId   1}`">

Это приведет к отображению 2 блоков, как и ожидалось, я думаю.
Вот конечный результат.

1. Отредактированный вопрос с исправлением, связанным с ошибками; проблема связана с данными и тем, как отображается шаблон. Есть два контейнера, которые должны поддерживать dnd; категории и элементы; но каждый из них имеет разные поля (включая идентификаторы). Когда элемент отображается как категория, в нем отсутствуют поля категорий (например itemSectionCategoryName ).

2. @sebi быстрее создаст репозиторий на github, если вы планируете вносить подобные изменения. Кроме того, попробуйте прицелиться вниз. Глядя на код здесь, вам нужно иметь nested-draggable : sortablejs.github.io/Vue.Draggable/#/nested-example Не видел ничего подобного в вашем коде.

3. Я пытаюсь добавить его сейчас, но мне удалось воспроизвести вложенное перетаскиваемое поведение без него: codesandbox.io/s/priceless-perlman-n6psw?file=/src/components/…

4. Я не уверен, что это работает полностью так, как ожидалось, потому что у вас не может быть глубины > 2 (> pre выглядит довольно уродливо и тоже трудно понять). И я думаю, что если vuedraggable у вас есть nested-draggable компонент, то на это есть причина. Использование некоторых хаков не приведет к созданию чистого кода в конце (а иногда он просто не будет работать вообще) ИМО.

5. Фиксированная глубина является преднамеренной; (в моем случае каждая категория может иметь только один уровень элементов). На данный момент стиль имеет меньшее значение, чем функциональность, это элементарные хаки, предназначенные для демонстрации воспроизводимого поведения.

Ответ №2:

Я решил использовать вложенные перетаскиваемые (создание спутниковых данных, связанных с группами и предметами инвентаря):

https://codesandbox.io/s/x8ur4?file=/src/components/InventorySectionDraggable.vue

Мне все еще нужно обернуть реквизит вокруг компонентов.

Выполнено:

https://codesandbox.io/s/rmh2n