This is my first row. Based on the select option here, I need to select the different rows
<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>
If I select option 1 I need to display the following row
<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>
If I select option 2 I need to display the following row
<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>
If I select option 3 I need to display the following row
<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>
How can I able to achieve the following case in html vue js? Based on the option selection, I need to display the row as above.
My vue js code is
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;
},
},
});