VueJS防止反应行为

Question

如何使用VueDraggable克隆一个项目，该项目一旦被克隆就没有链接到原始项目。

请以这个小提琴为例： https://jsfiddle.net/32f7yu7c/69/

当您将项目从列表1拖动到列表2时，请点击“更新”文本，您将看到两个列表中的两个名称都已更新。我如何防止这种行为？

我想触发此点击处理程序<span @click="update(index)">Update</span>，而只更新相对列表中的项目。

Answer 1

默认情况下，VueDraggable实际上不会进行深度克隆。您需要使用克隆方法的名称将'clone'属性添加到可拖动组件中：

<draggable :list="list" class="dragArea" :clone="clone" :options="{group:{ name:'people',  pull:'clone', put:false }}">

并将克隆方法添加到您的组件中：

clone: function(me) {
   return JSON.parse(JSON.stringify(me));
}

这是一个工作的小提琴：

https://jsfiddle.net/jmbldwn/3gcyemft/1/