经过排查,发现是vuedraggable插件内部的bug,页面本身逻辑没有问题。
后续的处理方案是,每次拖拽结束强制更新dom。
<draggable v-model="list" v-if="list.length" @end="handleEnd">
...
</draggable>
<script lang="ts">
import { ref, nextTick } from 'vue'
const list = ref([])
const handleEnd = () => {
// 将数据保存到另一个变量里(新内存地址),防止被line 12清空
const _list = JSON.parse(JSON.stringify(list))
// 更新list,通过v-if list.length触发更新
list.value = []
nextTick(funciton() {
list.value = _list
})
}
</script>