CODEWITHSUNDEEP
javascriptloopsvue.jsfrontendbootstrap-select
PenAndPapers
PenAndPapers

Reputation: 2108

Vue loop not working when bootstrap-select is initialized

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

Upvotes: 0

Views: 1245

Answers (3)

Taufik Akbar
Taufik Akbar

Reputation: 336

have you tried using nextTick? init the bootstrapselect on the next tick of the vue clock

VUE docs, next-tick

Example

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

    this.$nextTick(function(){
        $('.selectteam').selectpicker();
    });
}

EDIT :

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

            this.$nextTick(function(){
              $('.selectteam').selectpicker();
            });
        }
    });
}

Upvotes: 1

Taras Chernata
Taras Chernata

Reputation: 401

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.

Upvotes: 1

PenAndPapers
PenAndPapers

Reputation: 2108

not really sure if what I've made is a good solution for my issue. Added a setTimeout method and it works.

    this.getCurrentSeasonTeams().then( (response) => {
        if( response.status == 200 && typeof(response.data) == 'object' ) {
            this.nblTeams = response.data;
            if(typeof(this.nblTeams) == 'object'){
                setTimeout(() => {
                    $('.team').selectpicker();
                }, 500);
            }
        }
    });

Upvotes: 0

Related Questions