如何在html vue js中基于多个选择选项添加行?
Posted
技术标签:
【中文标题】如何在html vue js中基于多个选择选项添加行?【英文标题】:How to add rows based on multiple selection options in html vue js? 【发布时间】:2018-09-16 06:38:19 【问题描述】: <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:
);
我需要选择多个选项,并且基于相同的选项我需要动态添加行。
现在,如果我选择一个选项,我可以达到我的代码所示的结果(ABOVE CODE) 但, 我需要选择多个选项,并根据选择的选项,我需要动态添加行。 IE。如果我选择选项 1 和 2,我需要为选项 1 和 2 添加行。
请帮我解决一下..
【问题讨论】:
【参考方案1】:试试这个,希望对你有帮助。
模板代码
<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')
【讨论】:
如何在数组中使用v-if【参考方案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[]
并使用v-if
渲染div,如果当前迭代项目的选项存在于selectedType[]
中。
这里是working fiddle
【讨论】:
先生,如果我选择选项一,我需要添加一个输入很少的新行,如果我选择两个,我需要添加另一行和相应的输入,如我的示例所示。我怎样才能做到这一点 即。如果我选择选项 1,我需要显示发布日期和 type=date 的相应输入框。如果我选择选项 2,我需要使用 type=text 显示全名。在你的小提琴中,如果我选择任何我得到的输入 type=date以上是关于如何在html vue js中基于多个选择选项添加行?的主要内容,如果未能解决你的问题,请参考以下文章
如果先前在 vue js html 中选择了这些选项,我该如何避免这些选项?
如何在 vue js 中使用 html 的选择选项仅显示该类别的服务?