How to use index for item-key?

[vedmant]

In my component in some cases I have no information what possible attributes object will have, in this case I can only use index as a key, but how it's now can be achieved, with Vue 2 I had no problems with it. But currently with new approach when Draggable is iterating instead of me caused a problem. And generally this is terrible idea to iterate arrays instead of users, what if it's not an array even should be iterated.

[3zzy]

77

[Alhubing]

Same problema here. Imagine you need to make an array of string sortable, you cannot because you dont have any field to provide as item-key. You can set a callback in the item-key property, but then you have access to the item but not to the index, so you cannot provide anything unique as a key. Ther must be a simple way to access the element index or use the index as item-key as you could before in versión 2.

[danielwillms]

Like @Alhubing mentioned, you can set a callback-function as item-key and use it to get the index of the item or just return the String itself.

have a look at this pen: https://codepen.io/3m7ecc/pen/GRBxqBm

[cbloss]

I'd love to know if anyone else figured this out. Like what if you have items that are duplicates? The second solution wouldn't work at all.

[drahkrub]

several points:

1. also see discussion in https://github.com/SortableJS/vue.draggable.next/issues/82
2. if for example an array of strings should be made sortable, than what about 2.1. making the key consecutive, i.e. :item-key="() => ++someLocalVar" (causes unnecessary rendering, but who cares) 2.2. making the key fixed, i.e. :item-key="() => 42" (both works for me)
3. I have the problem that my array of strings should also be editable, but

   ...
   <template #item="{element}">
       <input v-model="element">
   ...

   does not work - my "solution" is to wrap my strings into an object such that <input v-model="element.text"> works. Any other ideas?

4. https://alfred-skyblue.github.io/vue-draggable-plus/en/ was recommended by Evan You himself (https://x.com/youyuxi/status/1726975120756126179) - looks promising - any experiences with that? (but does not solve my problem described in 3.)
5. another lib not based on SortableJS: https://www.npmjs.com/package/@atlaskit/pragmatic-drag-and-drop / https://www.youtube.com/watch?v=5SQkOyzZLHM