可拖动不适用于嵌套组件

Question

在

我有一个模板未在我的 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

Answer 1

您的代码（浏览器控制台 + ESlint）中有几个错误，请尝试修复它们，这将突出显示在某些时候可能会阻塞的几个问题。

至于您当前的问题，您确实有一些重复的代码：渲染的块和未渲染的块。这是因为 :key 需要唯一。由于您的代码在 2 个块上是相同的，因此密钥是重复的，我猜只呈现了一个。

如果你拿走第二块

<div :key="group.itemSectionCategoryId">

并将其更新为一些 naive 唯一键，像这样

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

这将按照我的预期渲染 2 个块。
这是最终结果。

Answer 2

我决定使用嵌套拖动（构建与库存组和项目相关的卫星数据）：

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

我仍然需要将道具包裹在组件周围。

完成：

https://codesandbox.io/s/rmh2n

可拖动不适用于嵌套组件

Draggable not applied to nested component

javascript

vue.js

vue-component

vuejs2