Question

我按照解决方案在此处创建动态表单元素： Dynamically adding different components in Vue

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

它的工作方式是用户创建一个“集合”，该集合定义为一组输入。因此，每个集合可以用于不同的人或地点等。

这是我的JSfiddle https://jsfiddle.net/61x784uv/

HTML

<div id="component-pii-input" v-for="field in fields" v-bind:is="field.type" :key="field.id">
</div>
<button id='button-add-pii-component' v-on:click="addFormElement('pii-entry-field')">Add Set</button>

</div>

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++
      });
    },

    }
});

Answer 1

您可能应该将这些删除按钮移到组件的<slot>中，以便可以传入范围为id的范围。

但是，如果不能这样做，则可以在各个组件的$emit上进行$parent删除事件，并传递要删除的项目id。

Vue.component('pii-entry-field', {
  data() {
    return {
      fields: [],
      count: 0,
    }
  },

  mounted() {
    this.$on('removeFormElement', this.removeFormElement);
  },

  methods: {
    addFormElement(type) {
      this.fields.push({
        'type': type,
        id: this.count++
      });
    },

    removeFormElement(id) {
      const index = this.fields.findIndex(f => f.id === id);

      this.fields.splice(index, 1);
    }
  },

  template: `
    <div class='pii-field'>
      <component v-for="field in fields" v-bind:is="field.type" :key="field.id"></component>

      <button id='button-add-pii-input' v-on:click="addFormElement('pii-input-field')">Add Input</button>
      <hr>
    </div>`,
})

Vue.component('pii-input-field', {
  data() {
    return {

    }
  },

  methods: {
    removeFormElement() {
      const id = this.$vnode.key;
      this.$parent.$emit('removeFormElement', id);
    }
  },

  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>
    </div>`,
})

var app = new Vue({
  el: '#app',

  data() {
    return {
      fields: [],
      count: 0,
    }
  },

  methods: {
    addFormElement(type) {
      this.fields.push({
        'type': type,
        id: this.count++
      });
    },

  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div id="component-pii-input" v-for="field in fields" v-bind:is="field.type" :key="field.id">

  </div>

  <button id="button-add-pii-component" v-on:click="addFormElement('pii-entry-field')" class="uk-button uk-button-primary uk-width-1-1 uk-margin-small">Add Set</button>
</div>

Answer 2

这是一个工作的小提琴：https://jsfiddle.net/e12hbLcr/

演练：

您需要为组件提供某种ID，以了解应删除哪些组件。您可以使用道具来做到这一点。
现在在子组件中创建函数并编辑按钮，以便它发送ID。

在Vue中，请记住道具掉落（父级->子级），事件上升（子级父级）。因此，现在我们需要告诉父母该按钮已被单击并发送了ID。

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

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

<组件v-for =“字段在字段中” v-bind：is =“ field.type”：id =“ field.id” @ remove =“ removeFormElement”：key =“ field.id”>

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

最后从fields数组中删除该项目。

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

删除动态创建的Vue组件

2 个答案: