<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>
<div class="row" v-if="selectedType==='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="selectedType==='2'">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Full Name</label>
<input type="date" class="form-control" v-model="fullname" required="">
</div>
</div>
</div>
我的 vue js 代码是
new Vue({
el: "#addForm",
data: {
selectedType: '',
address:'',
fullname:'',
released:''
},
methods: {
}
});
我需要选择多个选项，并且基于相同的我需要动态添加行。
现在，如果我选择一个选项，我可以实现我的代码（上面的代码）中显示的结果，但是，我需要选择多个选项，并根据所选的选项，我需要动态添加行。IE。如果我选择选项 1 和 2，我需要为选项 1 和 2 添加行。
请帮助我有一个解决方案..
你可以这样做
模板：
<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: {
}
});
概括：
设置一个数组types，其中包含保存将绑定到输入的属性的对象。
遍历这个types[]和使用呈现在divv-if只有在当前迭代的项的选项出现在selectedType[]。
这是工作小提琴
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句