为什么vue拖放项不会在列表之间移动？

Question

我正在尝试使用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列表时，它不会移动，我也不知道为什么。我可以在提供的示例代码( 这里 )中使用它，但当我将它更改为自己的代码时就不行了。

Answer 1

问题是，我将这个组定义为:group="{ name: 'people',，然后将其称为group="cardItem"，所以我将:group="{ name: 'people',更改为这个:group="{ name: 'cardItem',，它起了作用。