Draggable not applied to nested component

user_1079483 0
Viewed 383

In

https://codesandbox.io/s/vskdf

I have a template that is not rendered inside of my vuedraggable. Any ideas why?

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>

Fixed errors related to comp. init:

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

Nested dnd can be replicated like:

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

vuejs2 vue-component vue.js javascript
2 Answers

You have several errors in your code (browser console + ESlint), try fixing them, this will highlight several issues that may be blocking at some point.

As for your current issue, you do have some duplicated code: the block that is rendered and the one that is not. This is coming from the fact that the :key needs to be unique. Since your code is the same on the 2 blocks, the key is duplicated and only one is rendered I guess.

If you take the second block with it's

<div :key="group.itemSectionCategoryId">

And update it to some naive unique key like this

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

This will render the 2 blocks as expected I guess.
Here is the end result. enter image description here

user_88165850
user_10794830
Related