Bacancy Technology

Bacancy Technology represents the connected world, offering innovative and customer-centric information technology experiences, enabling Enterprises, Associates and the Society to Rise™.

12+

Countries where we have happy customers

1050+

Agile enabled employees

World wide offices

12+

Years of Experience

Agile Coaches

Certified Scrum Masters

1000+

Clients projects

1458

Happy customers

Vue

November 7, 2024

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; }); 
}

Support On Demand!

Related Q&A

Vue.js – Use Filter Inside v-for

How to Pass Post Parameter from Laravel Route to Axios in Vue JS?

ref vs reactive in Vue 3?

Listen to _esc_ Key Event on Div Component in Vue JS

Listening to “esc” Key Event on Div Component in Vue.js

Vue.js Chrome Devtools Not Detecting Vue.js

Vue