javascript - 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 将重新使用现有的组件实例，仅更改绑定(bind) item .

你应该设置key到唯一标识该特定项目的值。

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

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