如何根据html vue js中的select选项添加行?
Posted
技术标签:
【中文标题】如何根据html vue js中的select选项添加行?【英文标题】:How to add rows based on the select option in html vue js? 【发布时间】:2018-09-07 09:35:30 【问题描述】:这是我的第一行。根据此处的选择选项,我需要选择不同的行
<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="Type" id="type">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
</div>
如果我选择选项 1,我需要显示以下行
<div class="row">
<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>
如果我选择选项 2,我需要显示以下行
<div class="row">
<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>
如果我选择选项 3,我需要显示以下行
<div class="row">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Address</label>
<input type="date" class="form-control" v-model="address" required="">
</div>
</div>
</div>
如何在 html vue js 中实现以下案例?根据选项选择,我需要显示如上的行。
我的vue js代码是
addForm = new Vue(
el: "#addForm",
data:
Type: '',
released: '',
fullname:'',
address: '',
,
methods:
handleSubmit: function(e)
var vm = this;
data['Type'] = this.Type;
data['address'] = this.address;
data['fullname'] = this.fullname;
data['released'] = this.released;
$.ajax(
url: 'http://localhost:3000/f/',
data: data,
type: "POST",
dataType: 'json',
success: function(e)
if (e.status)
vm.response = e;
alert("success")
else
vm.response = e;
console.log(vm.response);
alert(" Failed")
);
return false;
,
,
);
【问题讨论】:
【参考方案1】:使用Conditional Rendering。
如下:
第 1 步:将 <select>
与 *selectedType' 绑定
第 2 步:使用v-if
确定应该显示哪一个。
new Vue(
el: "#addForm",
data:
selectedType: '',
address:'',
fullname:'',
released:''
,
methods:
);
<script src="https://unpkg.com/vue@2.0.1/dist/vue.js"></script>
<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">
<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>
<div class="row" v-if="selectedType==='3'">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Address</label>
<input type="date" class="form-control" v-model="address" required="">
</div>
</div>
</div>
</div>
【讨论】:
以上是关于如何根据html vue js中的select选项添加行?的主要内容,如果未能解决你的问题,请参考以下文章
如何在 vue.js 2 中设置 v-select 中选择的选项值?
Vue:如何根据选择的选项更改路线,并在 <select> 元素中显示默认选择的选项?
两个浏览器选项卡中的相同 Vue.js 组件使 <select> 镜像其选定值