How to Automatically Update “order” Field of an Item Using VueDraggable?

Steps

Add the end event handler to the draggable component. This event is fired after the drag-and-drop action is completed.

<draggable v-model="items" @end="onEnd"> <div v-for="item in items" :key="item.order"> {{ item.name }} </div> </draggable>

Update the order of the items within the event handler.

onEnd(event) { 
 this.items.forEach((item, index) => { item.order = index; }); 
}