时间戳

首页 > 解决方案 > 如何在 Vue.JS 中添加和删除确切的元素？

vue.js - 如何在 Vue.JS 中添加和删除确切的元素？

问题描述

美好的一天，我是 Vue 的新手，所以不要评判）
我创建了一个可以添加和删除输入的功能。

Vue模板部分

<div>

<div v-for="(input, indexOfInputs) in inputs" v-bind:key="input.id">
    <input type="text">
    <p @click="deleteRow(indexOfInputs)">Remove Input</p>
</div>

<p @click="addRow">Add Input</p>

</div>

脚本部分

data: () => {
    inputs: [],
},

methods: {
    addRow() {
        this.inputs.push({
            one: '',
        });
    },
    deleteRow(indexOfInputs) {
        this.inputs.splice(indexOfInputs, 1);
    },
}

它工作得很好，但如果我有大约 100 个表格怎么办？
我的意思是 100 个div这样的：

<div>

<div v-for="(input, indexOfInputs) in inputs" v-bind:key="input.id">
    <input type="text">
    <p @click="deleteRow(indexOfInputs)">Remove Input</p>
</div>

<p @click="addRow">Add Input</p>

</div>

例如，如果我将创建 100 个块，然后单击“添加输入”中的任何一个，它将添加 100 个输入而不是 1 个。

我不会创建 100 种方法，但是我应该怎么做呢？
我听说过一些关于event.taget，但我不知道在这种情况下如何使用它..

标签： vue.js

解决方案

根据文档，vue 组件中的数据值应该是一个函数。如果不是，那么数据中的所有属性都将在同一组件的所有实例之间共享。

你可以这样写：

data: function () {
  return {
    inputs: []
  }
}

使用 ES6 箭头函数的更短语法：

data: () => ({
    inputs: [],
})

推荐阅读