vue3中,解决vuedraggable拖拽移动超过两个长度位置后列表多出来重复项

200 阅读1分钟

经过排查,发现是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>