― I’M SHISHIR RAVEN

WEBSITE & App Builder

Lorem Ipsum is simply dummy text of the printing and type setting industry. Lorem Ipsum has been the industry’s standard dummy text.

Adding Sortable to a List in VueJS 3 in 3 Simple steps.


Step 1. Install vue.draggable.next

yarn add vuedraggable@next

npm i -S vuedraggable@next

Step 2 : Import and add as component

import draggable from 'vuedraggable';
export default {
  components:{draggable},
...

Step 2 : Use it as follows to create a Loop.

<draggable group="node"  v-model="posts" item-key="id">
        <template #item="{ element, index }" >
            <div>{{ element.title }}</div>
        </template>
</draggable>
   

Note: Don’t replace “element” with the model name. I was making this mistake and it took me a while that it has to remain as element name only.


Posted

in

by

Tags: