在 Vue.js 中从 DOM 中删除组件答案

【问题标题】：Removing components from the DOM in Vue.js在 Vue.js 中从 DOM 中删除组件
【发布时间】：2021-09-01 19:00:33
【问题描述】：

我正在使用 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>

fields 只是一个数组，如下所示：[0,1,2,3,4,...]

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

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

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

【问题讨论】：

您需要key 迭代并从fields 数组中删除正确的项目。

标签： javascript vue.js dom vuejs3

【解决方案1】：

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

不建议使用index 作为唯一键。

CODESANDBOX

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

【讨论】：

密钥不需要是 UUID。 v-for 模型上下文中的任何唯一键都可以。
以防万一，有CODESANDBOX的组合API。