我正在尝试使用 Vue draggable 创建一个卡片生成器。我有一排满满的cardElements，这些可以拖到卡片生成器上。卡片生成器是一个由列表的各个“桶”组成的矩形。这是它的样子：
这是script生成元素列表的方法：
import draggable from 'vuedraggable'
export default {
name: "clone",
display: "Clone",
order: 2,
components: {
draggable
},
data() {
return {
cardElements: [
{ name: "Logo", id: 1 },
{ name: "Stamp", id: 2 }
],
arrA: []
};
},
methods: {
log: function(evt) {
window.console.log(evt);
}
}
};
您可以看到cardElements从脚本正确呈现，这就是它们在 HTML 中呈现的方式：
<draggable class="dragArea list-group" :list="cardElements" :group="{ name: 'people', pull: 'clone', put: false }" @change="log">
<div class="list-group-item" v-for="element in cardElements" :key="element.name">
{{ element.name }}
</div>
</draggable>
这些是可拖动的，我可以像这样更改它们的顺序：
卡片上的每个“桶”都被声明为一个数组，如下所示（这仅适用于卡片构建器的左上角，每个方格都是不同的数字）：
data() {
return {
cardElements: [
{ name: "Logo", id: 1 },
{ name: "Stamp", id: 2 }
],
arrA: []
};
}
<draggable class="dragArea list-group" :list="arrA" group="cardItem" @change="log">
<div class="lvl1-1 bucket empty" v-for="element in arrA" :key="element.name">
{{ element.name }}
</div>
</draggable>
但是当我将一个元素从cardElements列表拖到arrA列表中时，它并没有移动，我不知道为什么。我可以在此处提供的示例代码中使其工作，但当我将其更改为我自己的代码时则不行。