Question

我必须做一个拖放程序，所以我使用Vue.Draggable，但是当我将元素拖放到第二个列表中时，该列表上最后创建的元素不是我拖放的元素，而是拥有该元素的那个元素值已替换。

例如，如果我有一个像这样的放置数组：

var a = [
    {
        name: 'element1'
    },
    {
        name: 'element2'
    },
    ...
]

然后在第二个列表的第一个元素之前放置一个元素，最后一个创建的元素将是'element1'，我需要我的程序将最后创建的元素设置为一个元素

我不知道Vue.Draggable是如何做到的，但是当我以编程方式在第二个列表中某处的元素，例如secondList.splice(3, 0, newElement)，最后创建的元素是我想要的元素（newElement）

这是第一个列表中的代码：

<draggable v-model="blocks" :clone="clone" :options="draggableOptions" @end="reGenerateUuid">
    <block
        v-for="b in blocks"
        :key="b.props.uuid"
        :title="b.title"
        :image="b.image"
        @click.native="addBlock(blocks[key])" />
</draggable>

第二个列表是一个渲染的组件，所以我不能共享它，因为它很大。第二个列表不使用带有可拖动组件的v模型，而是使用list道具，因为据我了解，我不能将v模型放在VueJS中的渲染元素上。

在第二个列表上可拖动的元素没有key道具，因为我不希望它们重新生成。

也许我需要指定应如何将元素添加到第二个列表中？

有人有主意吗？

Answer 1

第二个列表上可拖动的元素没有关键道具因为我不希望它们再生。

您需要key道具。否则，Vue无法正确跟踪元素的顺序。

最后创建的元素不是我删除的元素

1 个答案: