Missing required prop: "itemKey"

[francosabin]

Hello, thanks for this wonderful extension, it looks very good, I have been trying the demo and I get this warning:

runtime-core.esm-bundler.js?9e79:38 [Vue warn]: Missing required prop: "itemKey"
at <Draggable list= (2) [{…}, {…}] ghost-class="ghost" onInput=fn ... >
at <QDraggableTreeNode value= {id: 2, label: 'Good food', children: Array(2)}children: (2) [{…}, {…}]0: {id: 3, label: 'Quality ingredients', children: Array(0)}children: []id: 3label: "Quality ingredients"[[Prototype]]: Object1: {id: 4, label: 'Good recipe', children: Array(0)}children: []id: 4label: "Good recipe"[[Prototype]]: Objectlength: 2[[Prototype]]: Array(0)id: 2label: "Good food"[[Prototype]]: Object onInput=fn group="testsailordgod" ... >
at <Draggable list= (3) [{…}, {…}, {…}] item-key="name" group="testsailordgod" ... >
at <QDraggableTreeNode value= {id: 1, label: 'Satisfied customers', children: Array(3)} group="testsailordgod" onInput=fn ... >
at <QDraggableTree modelValue= [{…}] onUpdate:modelValue=fn data= [{…}] ... >
at
at <QCardSection class="no-shadow" style= {padding: 0} >
at
at
at
at <BasicExample onVnodeUnmounted=fn ref=Ref< Proxy {…} > >
at
at
at
at <MainLayout onVnodeUnmounted=fn ref=Ref< Proxy {…} > >
at
at

Could you tell me how to solve it?

[mayank091193]

Which version of Vue are you using?

[francosabin]

I am using Vue 3, vue/cli 4.5.13,

I downloaded the demo that is in your Github repository and typed yarn to install the dependencies and then quasar dev.

The demo works fine and does the drag and drop but in the console I get that message, with which version of Vue should it work well?

[francosabin]

Hello, it seems that you are migrating your extension from vue2 to vue3 using Vue-draggable, if so, please check this part in your code:

Migrate from vue 2 version:
Breaking changes:

Use item slot instead of default to display elements
Provide a key for items using itemKey props
From:

{{element.name}}

To:

<draggable v-model="myArray" item-key="id">
<template #item="{element}">

{{element.name}}

I hope this makes some sense to help you, thanks

[francosabin]

I'm sorry, it seems that the code is not complete when I paste it, but you can check it in the following link:

https://github.com/SortableJS/vue.draggable.next

[mayank091193]

Hey,

Please uninstall the current package and re-install it and then try. Let me know if it works or not. I am unable to reproduce the issue on my system. But I have applied a few fixes based on the assumption.

Thanks,

[francosabin]

Hello, yes, it works very well, thank you very much and success in your life and family, greetings.