Select box options are on DOM but not showing on bootstrap-select dropdown ul in Vue.js

i’m doing the project i’ve been working on.

the problem is i need to get the select box option data using axios. so it looks like this.

<optgroup label="group1">
  <option v-for="aa11 in aa11" :value="aa11.value" :key="aa11.code">{{aa11.value}}</option>
</optgroup>
<optgroup label="group2">
  <option v-for="aa12 in aa12" :value="aa12.value" :key="aa12.code">{{aa12.value}}</option>
</optgroup>
...

and the data,

data(){
  return{
    aa11:[],aa12:[]
  }
}

set like this.

and on js

axios.get('URL')
.then(response=>{
   if(response.data.upjongapi[0].aa11 != null){
   for(let i=0; i<response.data.upjongapi[0].aa11.length; i++){
 this.aa11.push({"code":response.data.upjongapi[0].aa11[i].code,"value":response.data.upjongapi[0].aa11[i].value});
            }
        }

so, it mount on DOM, i can see in on chrome dev tool. but i want to use bootstrap-select which i downloaded and customised. (i import it instead of npm install.) and the problem is on bootstrap-select DOM which is dropdown ul,li it doesn’t show. very few times it shows, so i can’t figure out when it shows or when it not show. (seems like it depends on the luck =( )

this is the problem capture pic. the options that are in yellow circle should be on select box!!

i want to see all the options, and it all mounted on DOM, but i dont’ think it mounted on bootstrap-select dropdown. what should i do? little help would be appriciated!

Avoid using the same variable name as your array for your v-for loop iterator:

<optgroup label="group1">
  <option v-for="opt in aa11" :value="opt.value" :key="opt.code">{{opt.value}}</option>
</optgroup>
<optgroup label="group2">
  <option v-for="opt in aa12" :value="opt.value" :key="opt.code">{{opt.value}}</option>
</optgroup>
1 Like