代码之家 › 专栏 › 技术社区 › marcnewport

更改dom时未销毁Vue组件

vue.js javascript

marcnewport · 技术社区 · 6 年前

我有一个vue应用程序,可以重新订购和筛选组件列表。

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

但当我重新排序或筛选列表时,组件不会触发已销毁的事件,我需要向容器中添加一个类并移除其中的图像src。

1 回复 | 直到 6 年前

Decade Moon 6 年前

如果你不设置 key 在每个项上,Vue将重用现有组件实例,只更改绑定 item .

你应该设定 钥匙

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

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

推荐文章

StuP · 响应式Vue组件在数据更改时不更新

2 年前

dbzx10299 · 对从Api端点返回的数据使用Vue转换组

2 年前

mrDandaleonx · Vue3获取div内容并将其发布到表单

2 年前

ateymour · Vue3在异步调用后将道具传递给子组件

2 年前

Artur Müller Romanov · 是否可以有条件地渲染布局?

2 年前

Ilijanovic · 对象可能未定义

2 年前

devAR · 单击其他组件时,单选按钮未保持选中状态

2 年前

Coderama · 在v-for指令中使用:key属性时,TS应出现类型错误

2 年前

Suffii · Vue表单输入绑定的条件绑定存在问题

2 年前

akkonrad · 函数的作用是:返回数据属性为空的实例

3 年前