[Vuejs]-Setting the default selected option for the b-form-select which will be created dynamically

by

0👍

I have recreated your code at jsfiddle. Check it. It working as wanted.

So Ill explain the code .

You need to auto select a default value mean that relevant data property (attached to v-model)should have a value where that value should also available in the option list. So what I have done here is that v-model for b-form-select will be predefined with null values. If you dont know how many dynamic selections will be there then make that data property dynamically on at the component. Means you can initiate data at mounted/created.

Code

<div id="app">
  <div class="w-100">
           <b-form-select v-for="(skill,index) in skillsList" v-model="selectedSkills[index]" class="form-control" >
            <b-form-select-option value="null" disabled>Choose</b-form-select-option>
            <b-form-select-option value="set">Set</b-form-select-option>
            <b-form-select-option value="unset">Unset</b-form-select-option>
        </b-form-select>
</div>
</div>

Script

 data() {
      return {
        selectedSkills : ['null','null','null'],
        skillsList : ['skill 01', 'skill 02', 'skill 03'],
      }
    },

Leave a comment