Vue3中vuedraggable拖拽元素复位问题求助

在Vue3项目中使用vuedraggable实现展开面板内元素的重排序功能，元素可拖拽至面板内新位置，但释放后会恢复原位置。推测vuedraggable依赖的底层列表未随元素移动更新，导致复位。

相关代码如下：

模板代码 #

<v-expansion-panels>
  <v-expansion-panel v-for="feature in groupedFeatures" :key="feature.type">
    <v-expansion-panel-title>
      <div>{{ translateFeatureType(feature.type) }}</div>
    </v-expansion-panel-title>
    <v-expansion-panel-text>
      <draggable v-model="feature.details" group="featureGroup" item-key="model_name">
        <template #item="{element, index}">
          <div :key="element.model_name">
            <p><strong>Model:</strong> {{ element.model_name }}</p>
            <p>{{ element.value }}</p>
          </div>
        </template>
      </draggable>
    </v-expansion-panel-text>
  </v-expansion-panel>
</v-expansion-panels>

导入与变量定义 #

import { ref, onMounted, computed } from 'vue';
import axios from 'axios';
import { useRoute } from 'vue-router';
import draggable from 'vuedraggable';

const route = useRoute();
const features = ref([]);
const messages = ref([]);

onMounted 函数 #

onMounted(async () => {
    const threadData = await fetchEmailThreads(route.params.id);
  if (threadData) {
    features.value = threadData.features;
    messages.value = threadData.messages;
  }
});

groupedFeatures 计算属性 #

const groupedFeatures = computed(() => {
  const featureMap = new Map();
  features.value.forEach(f => {
    if (!featureMap.has(f.type)) {
      featureMap.set(f.type, { type: f.type, details: [] });
    }
    featureMap.get(f.type).details.push({ model_name: f.model_name, value: f.value });
  });
  return Array.from(featureMap.values());
});

服务器返回数据格式 #

{
  "chat_id": 1,
  "features": [
    {
      "model_name": "Vicuna-13B",
      "type": "abstract_feature",
      "value": "---Feature Content---"
    },
    {
      "model_name": "Vicuna-13B",
      "type": "generated_feature",
      "value": "---Feature Content---"
    },
    {
      "model_name": "Vicuna-13B",
      "type": "generated_feature",
      "value": "---Feature Content---"
    },
    {
      "model_name": "Vicuna-13B",
      "type": "order_feature",
      "value": "---Feature Content---"
    },
    {
      "model_name": "Solaris-13B",
      "type": "abstract_feature",
      "value": "---Feature Content---"
    },
    {
      "model_name": "Solaris-13B",
      "type": "generated_feature",
      "value": "---Feature Content---"
    },
    {
      "model_name": "Solaris-13B",
      "type": "generated_feature",
      "value": "---Feature Content---"
    },
    {
      "model_name": "Solaris-13B",
      "type": "order_feature",
      "value": "---Feature Content---"
    }
  ],
  "inst_id": 0,
  "messages": [
    {
      "content": "Message Content...",
      "message_id": 1,
      "sender": "sender1",
      "timestamp": "2022-11-08T14:15:00"
    },
    {
      "content": "Message Content...",
      "message_id": 2,
      "sender": "sender2",
      "timestamp": "2022-11-09T15:45:00"
    }
  ],
  "subject": "Topic"
}

核心问题在于groupedFeatures是计算属性，它每次都会基于features数组重新生成全新的分组对象和details数组：

1. vuedraggable修改的是计算属性临时生成的details数组，而非原始数据源features
2. 组件任何依赖更新时，计算属性会重新执行，覆盖掉拖拽后的排序结果
3. 计算属性中details数组里的元素是新创建的对象，和features数组的元素没有引用关联，修改无法同步回原始数据

1. 将groupedFeatures从计算属性改为响应式引用 #

删除原来的computed定义，替换为ref手动维护分组数据：

const groupedFeatures = ref([]);

2. 在onMounted中初始化分组数据 #

获取服务器数据后，直接构建分组结构，并且保持与features数组元素的引用关联：

onMounted(async () => {
  const threadData = await fetchEmailThreads(route.params.id);
  if (threadData) {
    features.value = threadData.features;
    messages.value = threadData.messages;
    
    // 初始化分组数据，直接引用原features元素
    const featureMap = new Map();
    features.value.forEach(f => {
      if (!featureMap.has(f.type)) {
        featureMap.set(f.type, { type: f.type, details: [] });
      }
      // 直接push原对象，而非新建对象
      featureMap.get(f.type).details.push(f);
    });
    groupedFeatures.value = Array.from(featureMap.values());
  }
});

3. 添加拖拽结束事件，同步更新原始features数组 #

在模板的draggable组件上添加@end事件，拖拽完成后重新构建features数组的顺序：

<draggable 
  v-model="feature.details" 
  group="featureGroup" 
  item-key="model_name"
  @end="handleDragEnd"
>

实现handleDragEnd函数：

const handleDragEnd = () => {
  // 按分组后的顺序重新构建features数组
  const sortedFeatures = [];
  groupedFeatures.value.forEach(group => {
    sortedFeatures.push(...group.details);
  });
  features.value = sortedFeatures;
};

4. 可选：优化item-key避免重复 #

如果同一分组内存在model_name重复的元素（如示例中的generated_feature分组），建议使用更唯一的标识作为item-key：

<draggable 
  v-model="feature.details" 
  group="featureGroup" 
  :item-key="(element) => `${element.type}-${element.model_name}-${element.value}`"
  @end="handleDragEnd"
>

修改完成后，拖拽元素时：

• groupedFeatures作为响应式引用，不会被重新计算覆盖
• 拖拽修改的是原features元素所在的数组，引用关联保证数据一致性
• handleDragEnd同步更新features数组，确保原始数据源与排序结果一致

内容的提问来源于stack exchange，提问作者Broxy