Utilizing Vue 2 alongside Vuex, the incoming object gets organized into distinct sub-objects according to the classCategory value. Could it be failing because the v-model value in draggable is a key sourced from the parent tag object?
<div class="class-draggable__group" v-for="group in groupedClasses" :key="group.categoryLocalised">
<label class="class-draggable__label__category">{{ group.categoryLocalised }}</label>
<draggable v-model="group.classes"
:options="{ group: 'classes', dragClass: 'drag', ghostClass: 'ghost' }">
<div v-for="classItem in group.classes" :key="classItem.class" class="class-draggable__draggable__item">
<div class="d-flex align-items-center">
<svg-icon name="drag" class="mr-8 move item"></svg-icon>
<div>{{ classItem.classLocalised }}</div>
</div>
<div class="class-info d-flex align-items-center">
<checkbox class="class-draggable__draggable__item__checkbox" :view="1"
v-model="classItem.enabled" @select="toggleClassEnabledValue(classItem.class, $event)" />
<div class="icon-wrapper">
<svg-icon v-if="classItem.boolVal1Enabled" name="boolVal1Icon"></svg-icon>
</div>
<div class="icon-wrapper">
<svg-icon v-if="classItem.boolVal2Enabled" name="boolVal2Icon"></svg-icon>
</div>
<btn :content="{ icon: 'edit' }" class="class-draggable__draggable__item__button mr-8"
round="circle" @click="editClassHandler(classItem.class)" />
</div>
</div>
</draggable>
</div>
groupedClasses() {
const groups = {};
this.zoneInfoClasses.forEach(classItem => {
if (!groups[classItem.categoryLocalised]) {
groups[classItem.categoryLocalised] = [];
}
groups[classItem.categoryLocalised].push(classItem);
});
return Object.keys(groups).map(categoryLocalised => ({
categoryLocalised,
classes: groups[categoryLocalised],
}));
},
This is the zoneInfoClasses object:
[
{
class: "classa"
classLocalised: "classA"
categoryLocalised: "category1"
enabled: true
boolVal1Enabled: false
boolVal2Enabled: false
}
{
class: "classb"
classLocalised: "classB"
categoryLocalised: "category2"
enabled: false
boolVal1Enabled: false
boolVal2Enabled: false
}
{
class: "classc"
classLocalised: "classC"
categoryLocalised: "category1"
enabled: false
boolVal1Enabled: false
boolVal2Enabled: false
}
{
class: "classd"
classLocalised: "classD"
categoryLocalised: "category2"
enabled: false
boolVal1Enabled: false
boolVal2Enabled: false
}
]
The drag feature works perfectly visually. However, upon releasing the dragged item, all items revert back to their initial positions.