vue vddl 插件 Duplicate keys detected bug 解决方法

[yyman001]

又经过一次调试发现

handleMoved ({ index }) {
      this.lists.splice(index, 1)
      console.warn('1',new Date())
    },
    handleDrop (draggable) {
      console.warn('2',new Date())
      this.lists.splice(draggable.index, 0, draggable.item)
    }

原因，应该是插件设计的问题， 插入方法比删除方法执行还要早出发，所以导致了有重复键的出现（也有可能不同浏览器的渲染差异造成） 解决办法hack: 给handleDrop延迟执行，避免把copy元素先插入，这样2个重复的元素是导致我们出bug的主要原因

//但如果拖拉动作过快，也会可能产生以上的bug，原因已经说了
    handleDrop (draggable) {

          setTimeout(()=>{
           // '延迟操作'
              this.lists.splice(draggable.index, 0, draggable.item)
           })
         //或者 使用 this.$nextTick 

    }

最终比较完美的解决办法 1.把handleDrop 传入的对象 缓存起来 2.直接在 handleMoved 函数里面 把 删除操作完成

    handleMoved (targetDraggable) {
      //删除元素操作
        this.lists.splice(targetDraggable.index, 1)
     //插入之前的旧元素，为了安全使用了$nextTick，当然你可以不要也没什么问题
        this.$nextTick(()=>{
          this.lists.splice(this.delDraggable.index, 0, this.delDraggable.item)
         })
    },
    handleDrop (draggable) {
     //缓存起来
      this.delDraggable = draggable;
}