时间戳

首页 > 解决方案 > Vue 组件不会在 dom 更改时被破坏

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

问题描述

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

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

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

标签： javascriptvue.js

解决方案

如果你没有key在每个项目上设置 a ，那么 Vue 将重用现有的组件实例，只改变绑定的item.

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

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

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

推荐阅读