当 v-model 值是父标签的可迭代时，Vue 2 可拖动不反应

Question

我正在使用 Vue 2 和 Vuex。接收到的对象首先根据 classCategory 值分类为单独的子对象。 难道因为draggable中的v-model值是来自父标签对象的键而不起作用吗？

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

这是 zoneInfoClasses 对象：

[
    {
        class: "delivery"
        classLocalised: "classA"
        categoryLocalised: "category1"
        enabled: true
        boolVal1Enabled: false
        boolVal2Enabled: false
    }
    {
        class: "comfort"
        classLocalised: "classB"
        categoryLocalised: "category2"
        enabled: false
        boolVal1Enabled: false
        boolVal2Enabled: false
    }
    {
        class: "cargo"
        classLocalised: "classC"
        categoryLocalised: "category1"
        enabled: false
        boolVal1Enabled: false
        boolVal2Enabled: false
    }
    {
        class: "business"
        classLocalised: "classD"
        categoryLocalised: "category2"
        enabled: false
        boolVal1Enabled: false
        boolVal2Enabled: false
    }
]

拖动功能仅在视觉上完全有效。当我释放拖动的项目时，所有项目都会重置到其起始位置。

Answer 1

我想通了。做到这一点，以便替换新的定位而不是 groupedClasses 中的原始定位，然后将 groupedClasses 取消分组回到原来的状态，并提交到用于制作 groupedClasses 本身的存储中的值。

我将其添加到可拖动的开始标签中：

@change="handleDragEnd($event, group)"

这对于方法来说：

handleDragEnd(event, group) {
            this.groupedClasses.forEach(oldGroup => {
                if (oldGroup.categoryLocalised === group.categoryLocalised){
                    oldGroup.classes = [...group.classes]
                }
            });

            const ungroupedClasses = [];
            
            this.groupedClasses.forEach(group => {
                group.classes.forEach(classItem => {
                    ungroupedClasses.push(classItem);
                });
            });
            this.setZoneInfoValue({ prop: 'classes', value: ungroupedClasses });
        },
    ```