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

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-model 与可拖动组件一起使用，而是使用了 list 属性，因为据我了解，我无法将 v-model 放在 VueJS 中的渲染元素上。

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

也许我需要指定将元素添加到第二个列表的可拖动方式？

有人有想法吗？

Answer 1

第二个列表中可拖动的元素没有 key 属性 因为我不希望它们再生。

您需要 key 属性。否则 Vue 无法正确跟踪元素的顺序。