[Vuejs]-Vue loop not working when bootstrap-select is initialized

by

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.

👤Taras Chernata

1👍

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();
            });
        }
    });
}
👤Taufik Akbar

0👍

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);
            }
        }
    });
👤PenAndPapers

Leave a comment