How to add rows based on multiple selection options in html vue js?

Question

   <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>

My vue js code is

new Vue({
    el: "#addForm",
    data: {
        selectedType: '',
        address:'',
        fullname:'',
        released:''
    },
    methods: {
    }
});

I need to select multiple options and and based on the the same i need to add the rows dynamically.

Now if I select one option I am able to achieve the result as shown in my code (ABOVE CODE) BUT, I need to select multiple options and based on the options selected, I need to add rows dynamically. ie. If i choose option 1 and 2, i need to add the rows for both options 1 and 2.

Please help me to have a solution..

Lauda Wang · Accepted Answer · 2018-04-06 11:12:18Z

1

You can do it like this

Template:

<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>

Script

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: {
    }
});

summary:

set up an array types which contains objects holding the properties that will be bound to the inputs.
loop through this types[] and render the div using v-if onlý if the currently iterated item's option is present in selectedType[].

Here is the working fiddle

edited Apr 6, 2018 at 11:12

Lauda Wang

8873 gold badges11 silver badges19 bronze badges

answered Apr 6, 2018 at 9:59

Vamsi Krishna

31.4k8 gold badges73 silver badges81 bronze badges

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

2 Comments

Wanderer Over a year ago

Sir, if i select option one, i need to add a new row with few inputs, if i select two, i need to add another row and corresponding inputs as in my example. How can I achieve that

Wanderer Over a year ago

ie. if I select option 1, I need to show Date Released and corresponding input box with type=date. If I select option 2, I need to show Full name with type=text. In your fiddle if I select anything I am getting input type=date

Nik.Developer · Accepted Answer · 2018-04-10 06:36:44Z

Try this one, Hope its help you.

Template Code

<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>

Script:

var Main = {
    data () {
        return {
          selectedType: [],
          address:'',
          fullname:'',
          released:''
        }
    }
}
var Component = Vue.extend(Main)
new Component().$mount('#app')

Collectives™ on Stack Overflow

How to add rows based on multiple selection options in html vue js?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related