时间戳

首页 > 解决方案 > 在Vue中动态添加不同的组件

javascript - 在Vue中动态添加不同的组件

问题描述

我想使用 Vue 创建一个简单的表单构建器，用户可以在其中单击菜单中的按钮以将不同的表单字段添加到表单中。我知道如果只添加一种类型的表单字段，我可以用这样的东西来做（https://jsfiddle.net/u6j1uc3u/32/）：

<div id="app">
  <form-input v-for="field in fields"></form-input>

  <button type="button" v-on:click="addFormElement()">Add Form Element</button>
</div>

<script type="x-template" id="form-input">
  <div>
    <label>Text</label>
    <input type="text" />
  </div>
</script>

和：

Vue.component('form-input', {
  template: '#form-input'
});

new Vue({
  el: '#app',
  data: {
    fields: [],
    count: 0
  },

  methods: {
    addFormElement: function() {
      this.fields.push({type: 'text', placeholder: 'Textbox ' + (++this.count)});
    }
  }
})

但是如果有不止一种类型的表单域（输入、文件、选择等）怎么办？我在想可能为每种类型构建一个不同的组件，但是我将如何在一个表单元素列表中显示多种类型的组件？

我可以根据fields数组中的数据创建一个包含不同类型子组件的组件吗？

或者有没有更好的方法来解决我错过的这种情况？我刚刚开始学习 Vue，所以任何帮助表示赞赏！

标签： javascriptvue.jscomponents

解决方案

好的，所以我研究了动态元素并设法将它们组合在一起：

Vue.component('form-input', {
  template: '#form-input'
});

Vue.component('form-select', {
  template: '#form-select'
});

Vue.component('form-textarea', {
  template: '#form-textarea'
});

new Vue({
  el: '#app',
  data: {
    fields: [],
    count: 0
  },

  methods: {
    addFormElement: function(type) {
      this.fields.push({
        'type': type,
        id: this.count++
      });
    }
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<div id="app">
  <component v-for="field in fields" v-bind:is="field.type" :key="field.id"></component>

  <button type="button" v-on:click="addFormElement('form-input')">Add Textbox</button>
  <button type="button" v-on:click="addFormElement('form-select')">Add Select</button>
  <button type="button" v-on:click="addFormElement('form-textarea')">Add Textarea</button>
</div>

<script type="x-template" id="form-input">
  <div>
    <label>Text</label>
    <input type="text" />
  </div>
</script>

<script type="x-template" id="form-select">
  <div>
    <label>Select</label>
    <select>
      <option>Option 1</option>
      <option>Option 2</option>
    </select>
  </div>
</script>

<script type="x-template" id="form-textarea">
  <div>
    <label>Textarea</label>
    <textarea></textarea>
  </div>
</script>

因此，我不是为数组form-input中的每个项目创建一个新组件，而是通过字段的属性创建一个与正确组件相关联的新组件fieldscomponenttype

推荐阅读