Vue组件不会在dom更改时被破坏

Question

我有一个vue应用，可以重新排序和过滤组件列表。

<div id="my-app">
    <div v-for="item in listItems">
        <my-item v-bind:item="item"></my-item>
    </div>
</div>

但是当我重新排序或过滤列表时，该组件不会触发销毁事件，我需要向容器中添加一个类并删除其中的图像src。

Answer 1

如果您未在每个项目上都设置key，则Vue将重新使用现有的组件实例，仅更改绑定的item。

您应将key设置为唯一标识该特定项目的值。

<my-item :item="item" :key="item.id">

现在，当从列表中删除特定项目时，关联的<my-item>组件将被销毁且不会重复使用。