1

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;
        }, 
    },
});

1 Answer 1

2

use Conditional Rendering.

like below:

Step 1: bind <select> with *selectedType'

Step 2: use v-if to determinate which one should be displayed.

new Vue({
    el: "#addForm",
    data: {
        selectedType: '',
        address:'',
        fullname:'',
        released:''
    },
    methods: {
    }
});
<script src="https://unpkg.com/[email protected]/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>

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.