Javascript 如何在html vue js中基于多个选择选项添加行？

我需要选择多个选项，并在此基础上动态添加行

现在，如果我选择一个选项，我就能够实现代码（上面的代码）中所示的结果 但是 我需要选择多个选项，并根据选择的选项动态添加行。例如，如果我选择选项1和2，我需要为选项1和2添加行

---

请帮我找到一个解决方案。

试试这个，希望它能帮助你

模板代码

new Vue({
    el: "#addForm",
    data: {
        selectedType: '',
        address:'',
        fullname:'',
        released:''
    },
    methods: {
    }
});

---

你可以这样做

模板：

var Main = {
    data () {
        return {
          selectedType: [],
          address:'',
          fullname:'',
          released:''
        }
    }
}
var Component = Vue.extend(Main)
new Component().$mount('#app')

摘要：

• 设置一个数组

  types

  ，其中包含保存将绑定到输入的属性的对象

• 循环浏览此

  types[]

  并使用

  v-if

  呈现div，前提是当前迭代的项的选项出现在

  selectedType[]

  中

---

这是

先生，如果我选择选项一，我需要添加一个包含少量输入的新行，如果我选择两个，我需要添加另一行和相应的输入，如我的示例所示。我怎样才能做到这一点呢。如果我选择选项1，我需要显示发布日期和相应的输入框，类型=日期。如果我选择选项2，我需要用type=text显示全名。在你的小提琴中，如果我选择任何我得到的输入类型=日期如何在数组中使用v-if

<div id="app">
<div id="addForm">
  <div class="row">
    <div class="col-md-4">
      <div class="form-group label-floating">
        <label class="control-label">Case Type</label>
        <select class="form-control" v-model="selectedType" multiple>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </select>
      </div>
    </div>
    <div v-for="item in selectedType">
      <div class="row" v-if="item == 1">
        <div class="col-md-4">
          <div class="form-group label-floating">
            <label class="control-label">Date Released</label>
            <input type="date" class="form-control" v-model="released" required="">
          </div>
        </div>
      </div>
      <div class="row" v-if="item == 2">
        <div class="col-md-4">
          <div class="form-group label-floating">
            <label class="control-label">Full Name</label>
            <input type="text" class="form-control" v-model="fullname" required="">
          </div>
        </div>
      </div>
      <div class="row" v-if="item == 3">
        <div class="col-md-4">
          <div class="form-group label-floating">
            <label class="control-label">Address</label>
            <input type="textarea" class="form-control" v-model="address" required="">
          </div>
        </div>
      </div>
   </div>
  </div>
</div>

var Main = {
    data () {
        return {
          selectedType: [],
          address:'',
          fullname:'',
          released:''
        }
    }
}
var Component = Vue.extend(Main)
new Component().$mount('#app')

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div id="addForm">

  <div class="row">
    <div class="col-md-4">
      <div class="form-group label-floating">
        <label class="control-label">Case Type</label>
        <select class="form-control" v-model="selectedType" multiple>
          <option v-for="type in types" :value="type.option">{{type.option}}</option>
        </select>
      </div>
    </div>
  <div>

  <div class="row" v-for="type in types" v-if="selectedType.indexOf(type.option) !== -1">
    <div class="col-md-4">
      <div class="form-group label-floating">
        <label class="control-label">{{type.label}}</label>
        <input type="date" class="form-control" v-model="type.value" required>
      </div>
    </div>
  </div>

</div>

new Vue({
    el: "#addForm",
    data: {
        selectedType: [],
        types: [
          {option: 1, label: 'Date Realeased', value: ''},
          {option: 2, label: 'Full Name', value: ''},
          {option: 3, label: 'Address', value: ''}
        ]

    },
    methods: {
    }
});