I am using Vue 2 with Vuex. The received object is first sorted into separate sub-objects based on classCategory value.
Does it not work because the v-model value in draggable is a key from 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.taximeterEnabled" name="taximeterIcon"></svg-icon>
</div>
<div class="icon-wrapper">
<svg-icon v-if="classItem.haggleEnabled" name="haggleIcon"></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],
}));
},
here’s the zoneInfoClasses object:
0 Object { class: "delivery", classLocalised: "Доставка", categoryLocalised: "Доставка", … }
class "delivery"
classLocalised "Доставка"
categoryLocalised "Доставка"
enabled true
taximeterEnabled false
haggleEnabled false
1 Object { class: "comfort", classLocalised: "Комфорт", categoryLocalised: "Такси", … }
class "comfort"
classLocalised "Комфорт"
categoryLocalised "Такси"
enabled false
taximeterEnabled false
haggleEnabled false
2 Object { class: "cargo", classLocalised: "ГрузоТакси", categoryLocalised: "Доставка", … }
class "cargo"
classLocalised "ГрузоТакси"
categoryLocalised "Доставка"
enabled false
taximeterEnabled false
haggleEnabled false
3 Object { class: "business", classLocalised: "Бизнес", categoryLocalised: "Такси", … }
class "business"
classLocalised "Бизнес"
categoryLocalised "Такси"
enabled false
taximeterEnabled false
haggleEnabled false
Dragging functionality is working fully visually only. When I release the dragged item all items are reset to their starting position.