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

How and where are you running the jQuery? Can you share that part of your code? — ricopo
– ricopo, Commented May 23, 2017 at 7:09
@ricopo I'm using a laravel 5.4. So I've required jQuery in my bootstrap.js and in Vue mounted method is where I'm initializing the bootstrap-select. — PenAndPapers
– PenAndPapers, Commented May 23, 2017 at 7:18

Taras Chernata · Accepted Answer · 2019-11-09 08:16:19Z

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.

answered Nov 9, 2019 at 8:16

Taras Chernata

3999 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-16 03:14:10Z

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

edited Jul 16, 2022 at 3:14

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 23, 2017 at 7:29

Taufik Akbar

3361 silver badge10 bronze badges

1 Comment

PenAndPapers Over a year ago

no console error @Taufik Akbar, I think I just solved it, thanks

PenAndPapers · Accepted Answer · 2017-05-23 07:42:28Z

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

answered May 23, 2017 at 7:42

PenAndPapers

2,1089 gold badges34 silver badges65 bronze badges

3 Comments

PenAndPapers Over a year ago

@ricopo yes it needs the setTimeout to make it work, I think bootstrap-select checks the select box if it has options once the DOM is loaded, in my case maybe the loop is not yet finished rendering when I initialize bootstrap-select that's why select box has no options. Just a theory though

Taufik Akbar Over a year ago

@PenAndPapers check my edit. your timeout method can fail if the list is longer

PenAndPapers Over a year ago

@TaufikAkbar yes I did, and I applied your solution, thanks

Collectives™ on Stack Overflow

Vue loop not working when bootstrap-select is initialized

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related