时间戳

首页 > 解决方案 > 在 Vue.js 中从 DOM 中删除组件

javascript - 在 Vue.js 中从 DOM 中删除组件

问题描述

我正在使用 Vue.js（版本 3.x）渲染一些组件

<div v-for="(i, index) in fields" >
    <my-component :id="index" ></my-component>
    <span class="delete-icon" @click="removeField(index)" >&times;</span>
</div>

Wherefields只是一个像这样的数组：[0,1,2,3,4,...]

Vue 渲染与元素数量一样多的组件以及具有事件侦听器fields的跨度来触发函数，该函数获取渲染组件的索引，用于从 DOM 中删除相应的组件。delete-iconremoveField()

但是，我不确定如何向 Vue 指示需要删除特定组件 - 换句话说，我如何告诉 Vue 删除我单击的删除图标的特定组件，而不是仅仅从fields数组中删除一个元素，这将使用更少的组件重新渲染集合，始终导致最后一个组件被删除。

我也将 unique id's 传递给组件，因此从技术上讲，我可以使用 vanilla JS 删除组件，但想知道 Vue 是否提供了更优雅的解决方案。

标签： javascriptvue.jsdomvuejs3

解决方案

您可以创建一个方法来过滤fields

不建议index用作唯一键。

码沙盒

removeField(index) {
      this.fields = this.fields.filter((number, i) => {
        return i !== index;
      });
    },

推荐阅读