When I use the following template located at https://codesandbox.io/s/vskdf, why is it not rendering inside my vuedraggable? Any suggestions?
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>
To fix initialization errors, check out:https://codesandbox.io/s/y2cur?file=/src/components/InventorySectionDraggable.vue
You can replicate nested dnd like so:https://codesandbox.io/s/priceless-perlman-n6psw?file=/src/components/MyContainer.vue