[Vuejs]-Adding rows in html vue js based on the select option?

by

0👍

You could simply use a v-if on each input / label

<div class="row">
  <div class="col-md-4">
    <div class="form-group label-floating">

     <label class="control-label" v-if="Type == 'One'">Date Released</label>
     <input type="date" class="form-control" v-if="Type == 'One'" v-model="released" required="">

     <label class="control-label" v-if="Type == 'Two'">Full Name</label>
     <input type="date" class="form-control" v-model="fullname" required=""  v-if="Type == 'Two'">

     <label class="control-label" v-if="Type == 'Three'">Address</label>
     <input type="date" class="form-control" v-model="address" required="" v-if="Type == 'Three'">
    </div>
   </div>
 </div>

Alternatively for the label you could have an object that maps type to text 

typeMapping: {
  'One': 'Date Released',
  'Two': 'Full Name'
  'Three': 'Address'
}

then replace the labels in the first code sample with one label

<label class="control-label">typeMapping[Type]</label>

Leave a comment