vuedraggable 拖拽真实dom和数据不一致

vuedraggable 是一个基于 Vue.js 的拖拽组件库，它可以帮助我们在页面中实现拖拽排序等功能。但是，有时候拖拽后的实际 DOM 结构可能与原始数据不一致，这可能会导致一些问题。

这个问题通常出现在使用-model 绑定数据时，因为 v-model 只能同步数据，无法同步 DOM 结构。解决这个问题的方法是手动更新数据，可以通过监听拖拽事件，在事件回调函数中更新数据。

以下是一个基本的示例代码：

<template>
  <div>
    <draggable v-model="list" @end="onDragEnd">
      <div v-for="(item, index) in list" :key="item.id">
        {{ item.text }}
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  data() {
    return {
      list: [
        { id: 1, text: 'item 1' },
        { id: 2, text: 'item 2' },
        { id: 3, text: 'item 3' },
      ],
    };
  },
  methods: {
    onDragEnd() {
      // 更新数据
      this.list = this.$refs.draggable.toArray();
    },
  },
};
</script>

在上面的代码中，我们监听了 `end` 事件，在拖拽结束后更新了数据。在回调函数中，通过 `$refs.draggable.toArray()` 获取更新后的顺序数组，然后将其赋值给 `list` 数据即可。

这样做可能会影响性能，因为每次拖拽结束时都需要更新数据。但是，这是一种可行的解决方案，可以根据具体情况进行选择。