Javascript 删除动态创建的Vue组件

我按照解决方案在此处创建动态表单元素：

很好，我的下一个难题是，如果用户添加太多表单元素，我想删除表单元素

其工作方式是用户创建一个集合，该集合定义为一组输入。所以每一套都可能是针对不同的人、不同的地点等

这是我的名片

Html

Javascript

Vue.component('pii-entry-field', {
  data: function () {
    return {
fields: [],
    count: 0,
    }
  },
     methods: {
      addFormElement: function(type) {
      this.fields.push({
        'type': type,
        id: this.count++
      });
    },
     },
  template: ` <div class='pii-field'><div>
     <component v-for="field in fields" v-bind:is="field.type":key="field.id"></component>
             </div>

            <button id='button-add-pii-input' v-on:click="addFormElement('pii-input-field')">Add Input</button>
            <hr>
            </div>`,
})

Vue.component('pii-input-field', {
  data: function () {
    return {

    }
  },

  template: ` <div>
            <select>
                <option disabled>Select Classification</option>
                <option>Name</option>
                <option>Address</option>
                <option>Email</option>
                <option>Phone</option>
                <option>Medical</option>
                <option>Financial</option>
            </select>

        <div>
            <input type="text" placeholder="Input">
        </div>
        <button v-on:click="removeFormElement">Remove Input</button></span>
        </div>`,
})

var app = new Vue({
  el: '#app',
  data: {
    fields: [],
    count: 0,
  },
    methods: {
      addFormElement: function(type) {
      this.fields.push({
        'type': type,
        id: this.count++
      });
    },

    }
});

---

您可能应该将这些删除按钮移动到组件的某个位置，以便传入作用域id

但如果不能，可以在单个组件的$parent上发出$emit remove事件，传递要删除的项的id

Vue.组件“pii-输入字段”{ 资料{ 返回{ 字段：[]， 计数：0， } }, 安装{ this.$on'removeFormElement'，this.removeFormElement； }, 方法：{ addFormElementtype{ 这是我的{ “类型”：类型， 身份证号码：这个，伯爵++ }; }, removeFormElementid{ const index=this.fields.findIndexf=>f.id==id； 这个.fields.index，1； } }, 模板：` 添加输入 `, } Vue.组件“pii-input-field”{ 资料{ 返回{ } }, 方法：{ removeFormElement{ const id=this.$vnode.key； 此.$parent.$emit'removeFormElement'，id； } }, 模板：` 选择分类 名称 住址 电子邮件 电话 医学的 财政的 删除输入 `, } var app=新的Vue{ el:“应用程序”， 资料{ 返回{ 字段：[]， 计数：0， } }, 方法：{ addFormElementtype{ 这是我的{ “类型”：类型， 身份证号码：这个，伯爵++ }; }, } }; 添加集

---

您可能应该将这些删除按钮移动到组件的某个位置，以便传入作用域id

但如果不能，可以在单个组件的$parent上发出$emit remove事件，传递要删除的项的id

Vue.组件“pii-输入字段”{ 资料{ 返回{ 字段：[]， 计数：0， } }, 安装{ this.$on'removeFormElement'，this.removeFormElement； }, 方法：{ addFormElementtype{ 这是我的{ “类型”：类型， 身份证号码：这个，伯爵++ }; }, removeFormElementid{ const index=this.fields.findIndexf=>f.id==id； 这个.fields.index，1； } }, 模板：` 添加输入 `, } Vue.组件“pii-input-field”{ 资料{ 返回{ } }, 方法：{ removeFormElement{ const id=this.$vnode.key； 此.$parent.$emit'removeFormElement'，id； } }, 模板：` 选择分类 名称 住址 电子邮件 电话 医学的 财政的 删除输入 `, } var app=新的Vue{ el:“应用程序”， 资料{ 返回{ 字段：[]， 计数：0， } }, 方法：{ addFormElementtype{ 这是我的{ “类型”：类型， 身份证号码：这个，伯爵++ }; }, } }; 添加集

---

这是一把小提琴：

演练：

您需要为组件提供某种id，以知道应该删除哪个组件。你可以用道具来做这件事

现在在子组件中创建函数，并编辑按钮，使其发送id

删除输入</按钮>

请记住，在Vue中，道具向下移动到父->子级，事件向上移动到子级父级。所以现在我们需要告诉家长这个按钮被点击了，并且发送了一个id

removeFormElement(id) {
  console.log('sending message up to remove id', id)
  this.$emit('remove', id)      
}

告诉父组件侦听该事件并将函数附加到该事件

请注意，@与v-on相同：

最后从字段数组中删除该项。

---

这是一把小提琴：

演练：

您需要为组件提供某种id，以知道应该删除哪个组件。你可以用道具来做这件事

现在在子组件中创建函数，并编辑按钮，使其发送id

删除输入</按钮>

请记住，在Vue中，道具向下移动到父->子级，事件向上移动到子级父级。所以现在我们需要告诉家长这个按钮被点击了，并且发送了一个id

removeFormElement(id) {
  console.log('sending message up to remove id', id)
  this.$emit('remove', id)      
}

告诉父组件侦听该事件并将函数附加到该事件

请注意，@与v-on相同：

最后从字段数组中删除该项。

---

试过你的小提琴，因为某种原因它不会删除第二个或后续的输入。是的，我的错。id是元素数，当我改变数组时，元素数会改变。编辑：看到你的评论；很好的一个家伙，只有一个小问题是当你创建一个输入字段，然后删除它，然后添加一个新的，你不能再删除他们了，我猜这将很容易修复抱歉，错误，更新了代码。现在它会找到id为的组件。请参阅最后一个

---

我试过你的小提琴，因为某种原因它不会删除第二个或后续的输入。是的，我的错。id是元素数，当我改变数组时，元素数会改变。编辑：看到你的评论；很好的一个家伙，只有一个小问题是当你创建一个输入字段，然后删除它，然后添加一个新的，你不能再删除他们了，我猜这将很容易修复抱歉，错误，更新了代码。现在它找到id为的组件。请参阅最后一个函数

removeFormElement(id) {
    console.log('removing form element', id)        
    const index = this.fields.findIndex(f => f.id === id)
    this.fields.splice(index,1)                
}