Weird DOM error

[ct1735x]

I'm getting a strange red error, but only in the DOM. Vanilla console / Vue utility do not show any error. I'm using Vue 3 with Vuex 4 and VueDraggable 4.1.0

The error : image

I'm trying to setup a drag & drop nested list, here is my code :

<template>
  <draggable v-model="categories" item-key="tid" ghost-class="ghost">
    <template #item="{ category }">
      <div>{{ category.name }}</div>
      <drag-drop v-if="category.elements.length" v-model="category.elements" />
    </template>
  </draggable>
</template>
<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable,
  },
  computed: {
    categories: {
      get() {
        return this.$store.state.categories.all
      },
      set(value) {
        this.$store.commit('updateSortedCategories', value)
      },
    },
  },
}
</script>

If I try to write {{ categories }}, we can see that the store get is not a problem :

[ 
{ 
   "tid": "2", 
    "name": "Installation & licences", 
    "elements": [ 
     { 
        "tid": "97", 
        "name": "Sub-category", 
         "elements": [] 
      } 
      ] 
}, 
{ 
     "tid": "4", 
     "name": "Tutorial & guides", 
      "elements": [] 
}, 
{ 
     "tid": "6", 
     "name": "Videos",
      "elements": [] 
} 
]

If have no idea why this is not working as intended, am I doing something wrong ?

[superkooks]

Same issue. Have you managed to fix it or find a workaround (or even a replacement)?

[Spice-King]

@ClementT3 Your issue is multiple root nodes in the template. If you wrap them in a element it will go away.

@superkooks Probably the same, but you provided no reference template.

Something probably worth while doing is add some degree of error state/logging if someone does that.

[superkooks]

It turns out in my case I had set the slot wrong. It should be #item="{element}". Putting any other name for element caused it to error to DOM. It seems like this is what is causing @ClementT3's issue as well.

[Spice-King]

Yea, you are destructuring an object with two properties, element and index. If you want to not use name element, you can rename the destructured variable like so #item="{element: car}". And for the sake of completeness with TS enabled, you can cast the type in the latest Vue 3 by doing this #item="{element: car} : {element: Car}", assuming Car is a type. Kinda ugly, but at least gets around needing generics to do it better.

[brospars]

Thank you so much @Spice-King

Docs are unclear because coming from Vue 2 I had v-for="(chapter, index) in chapters" so I used #item="{chapter, chapterId}" and got no errors but empty objects...

[cschra]

Yea, you are destructuring an object with two properties, element and index. If you want to not use name element, you can rename the destructured variable like so #item="{element: car}". And for the sake of completeness with TS enabled, you can cast the type in the latest Vue 3 by doing this #item="{element: car} : {element: Car}", assuming Car is a type. Kinda ugly, but at least gets around needing generics to do it better.

This should be part of the documentation! I made a PR to add this - see #171