可拖动不适用于嵌套组件答案

【问题标题】：Draggable not applied to nested component可拖动不适用于嵌套组件
【发布时间】：2021-06-15 21:14:53
【问题描述】：

在

我有一个没有在我的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>

修复了与comp相关的错误。初始化：

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

嵌套的 dnd 可以像这样复制：

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

【问题讨论】：

PS：您的package.json 中有一个奇怪的- 包条目。

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

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

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

如果你拿第二块它是

<div :key="group.itemSectionCategoryId">

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

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

我猜这将按预期呈现 2 个块。
这是最终结果。

【讨论】：

已编辑问题并修复了与错误相关的问题；问题与数据以及模板的呈现方式有关。有两个容器需要支持dnd；类别和项目；但每个都有不同的字段（包括 id）。当一个项目被呈现为一个类别时，它缺少类别字段（例如itemSectionCategoryName）。
@sebi 如果您打算像这样推送更改，则可以更快地创建 github 存储库。另外，尝试缩小范围。看这里的代码，你需要有一个nested-draggable：sortablejs.github.io/Vue.Draggable/#/nested-example DIdn't saw any in your code。
我现在正在尝试添加它，但没有它我已经设法重现嵌套的可拖动行为：codesandbox.io/s/priceless-perlman-n6psw?file=/src/components/…
我不确定这是否完全按预期工作，因为深度不能 > 2（pre 看起来很丑，也很难理解）。我猜如果vuedraggable 确实有一个nested-draggable 组件，那是有原因的。使用一些技巧最终不会产生干净的代码（有时它根本不起作用）IMO。
固定深度是有意的；（在我的情况下，每个类别只能有一个级别的项目）。在这一点上，风格比功能更重要，这些是旨在展示可重现行为的基本技巧。

【解决方案2】：

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

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

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

完成：

https://codesandbox.io/s/rmh2n

【讨论】：

@kissu 还有一些工作要做：P