Vue loop not working when bootstrap-select is initialized

Question

I have loop on my select dropdown by default it shows the data properly.

<select name="" id="input" class="form-control selectteam">
    <option value="" disabled="" selected="">Filter by team</option>
    <option v-for="(team, index) in  nblTeams" :value="team.clubName">{{team.clubName}}</option>
</select>

but when I add $('.selectteam').selectpicker(); in the mounted method as per code below

mounted: function() {
        this.getCurrentSeasonTeams().then( (response) => {
            if( response.status == 200 && typeof(response.data) == 'object' ) {
                this.nblTeams = response.data;
            }
        });

        $('.selectteam').selectpicker();
    }

it doesnt show the teams list already. Btw I'm using bootstrap-select - Silvio Moreto

Answer 1

I had similar issue and I fixed that by adding setTimeout like this:

setTimeout(function () {
   $('.select-reviewer').selectpicker();
}, 10);

or this one if you've already initialized selectpicker:

setTimeout(function () {
   $('.select-reviewer').selectpicker('refresh');
}, 10);

Also I should mention about selected option. Bootstrap-select removes any 'selected' attributes from when it's initialized or refreshed that's why here is the code which prevent this:

setTimeout(function () {
   $('.select-reviewer').selectpicker('val', $('.select-reviewer option:selected').val());
}, delay);

As you see from the code above we just set the value in bootstrap-select when it's initialised.