Updating Vuex following Drag and Drop using vuedraggable - vue.js

Question

I have created a Vue application that uses Vuetify, Vuex and vuedraggable. The component functions as expected with drag and drop of v-card containing the associated information but I have not been able to find a way to identify the destination so that I can update the Vuex Store
<template>
<v-container>
<v-row justify='center'>
<v-col v-for="stage in stages" :key="stage.value">
<span class="card-text-bold">{{ stage.heading }}</span>
<draggable :list="buckets[stage.name]" group="openTasks" :move="handleStatus">
<v-card color="commentCard" class="list-group mt-3" v-for="task in buckets[stage.name]" :key="task._id">
<v-card-text>
<span class="card-text-bold">{{ task.title}}</span>
</v-card-text>
<v-card-text>
<span class="card-text"> {{ task.description}} </span>
</v-card-text>
<v-card-text>
{{ task.assignee}}<v-icon right #click="goToTask(task._id)">edit</v-icon>
</v-card-text>
</v-card>
</draggable>
</v-col>
</v-row>
</v-container>
</template>
<script>
import { mapGetters } from 'vuex';
import draggable from 'vuedraggable';
import moment from 'moment';
export default {
name: 'Tasks',
components: {
draggable
},
data() {
return {
stages: [
{ heading: 'Created', name: 'created' },
{ heading: 'Assigned', name: 'assigned' },
{ heading: 'In Progress', name: 'in progress' },
{ heading: 'On Hold', name: 'on hold' },
{ heading: 'Complete', name: 'complete' },
{ heading: 'Closed', name: 'closed' }
]
};
},
created() {
this.handleGetTasks();
},
computed: {
...mapGetters(['user', 'loading', 'tasks', 'buckets'])
},
methods: {
getTimeFromNow(time) {
return moment(new Date(time)).fromNow();
},
goToTask(taskId) {
this.$router.push(`/task/${taskId}`);
},
handleGetTasks() {
const userRole = localStorage.getItem('role');
const fullname = localStorage.getItem('fullname');
switch (userRole) {
case 'Manager': {
this.$store.dispatch('getAllTasks');
break;
}
case 'Requester': {
this.$store.dispatch('getRequestTasks', {
fullname: fullname
});
break;
}
case 'Assignee': {
this.$store.dispatch('getAssignTasks', {
fullname: fullname
});
break;
}
}
},
stateTasks(target) {
console.log('state', target);
if (this.buckets[target] > 0) return this.buckets[target];
else return [];
},
handleStatus(evt) {
const movedId = evt.draggedContext.element._id;
var targetStage;
console.log('source', movedId, 'target', Object.keys(evt.relatedContext.list));
}
}
};
</script>
The source list for data used here is the 'buckets' object which contains an array of tasks for each of the task stages. Drag and Drop moves the task cards from the source to the target but I have been able to find a way to identify the target list.
Please provide advice about how I can determine which of the lists in the 'buckets' object should be updated following the move.
Thanks
Des

Answer 1

If you take a look at the documentation, you'll see that vuedraggable has a #end event which will trigger after moving an element. When logging that event you'll notice quite a lot of useful information - such as oldIndex, newIndex and more..
<draggable :list="list" #end="onEnd">
Source: https://github.com/SortableJS/Vue.Draggable#events

Answer 2

I was able to solve the problem by parsing the HTML element of the move event.
The header for each of the stage columns can then be used as the identifier of the target list.
Here is the code
<template>
<v-container>
<v-row justify='center'>
<v-col v-for="(stage, index) in stages" :key='index'>
<draggable :list="buckets[stage]" group="openTasks" :move='handleMove'>
<span slot="header" :tag="stage" class="card-text-bold">{{ stage }}</span>
<v-card color="commentCard" class="list-group mt-3" v-for="task in buckets[stage]" :key="task._id">
<v-card-text>
<span class="card-text-bold">{{ task.title}}</span>
</v-card-text>
<v-card-text>
<span class="card-text"> {{ task.description}} </span>
</v-card-text>
<v-card-text>
{{ task.assignee}}<v-icon right #click="goToTask(task._id)">edit</v-icon>
</v-card-text>
</v-card>
</draggable>
</v-col>
</v-row>
</v-container>
</template>
<script>
import { mapGetters } from 'vuex';
import draggable from 'vuedraggable';
import moment from 'moment';
export default {
name: 'Tasks',
components: {
draggable
},
data() {
return {
stages: ['created', 'assigned', 'in progress', 'on hold', 'complete', 'archive']
};
},
created() {
this.handleGetTasks();
},
computed: {
...mapGetters(['user', 'loading', 'tasks', 'buckets'])
},
methods: {
getTimeFromNow(time) {
return moment(new Date(time)).fromNow();
},
goToTask(taskId) {
this.$router.push(`/task/${taskId}`);
},
handleGetTasks() {
const userRole = localStorage.getItem('role');
const fullname = localStorage.getItem('fullname');
switch (userRole) {
case 'Manager': {
this.$store.dispatch('getAllTasks');
break;
}
case 'Requester': {
this.$store.dispatch('getRequestTasks', {
fullname: fullname
});
break;
}
case 'Assignee': {
this.$store.dispatch('getAssignTasks', {
fullname: fullname
});
break;
}
}
},
handleMove(evt) {
const movedId = evt.draggedContext.element._id;
var stageTag = evt.relatedContext.component.rootContainer.firstElementChild.innerText;
if (this.stages.includes(stageTag)) {
this.$store.dispatch('changeStatus', {
taskId: movedId,
status: stageTag
});
}
}
}
};
Decoding the component HTML is done with this
evt.relatedContext.component.rootContainer.firstElementChild.innerText;