In my Vue 3 project, I'm implementing vuedraggable to enable element reordering within an expansion panel. However, I've encountered an issue where the dragged elements revert to their original positions upon release. This behavior suggests that the underlying list in vuedraggable is not being properly updated when elements are moved, causing them to reset. Below is a snippet of the relevant code:
<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>
Imports used in this project:
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([]);
The onMounted function implementation:
onMounted(async () => {
const threadData = await fetchEmailThreads(route.params.id);
if (threadData) {
features.value = threadData.features;
messages.value = threadData.messages;
}
Function for grouping features:
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());
});
Sample data structure received from the server:
{
"chat_id": 1,
"features": [
{
"model_name": "Vicuna-13B",
"type": "abstract_feature",
"value": "---Feature Content---"
},
...
],
"inst_id": 0,
"messages": [
{
"content": "Message Content...",
...
}
],
"subject": "Topic"
}
How can I ensure that the elements in the list are correctly updated and maintain their new positions after being dragged?