Using Vue with bootstrap select and refreshing options

[rumeau]

Hello im using bootstrap select plugin (http://silviomoreto.github.io/bootstrap-select/)

I am able to initialize plugin on select elements and load data, the problem is that select options are being loaded through ajax, based on another selection therefore after data is update on select, i cant refresh bootstrap select plugin.

Bootstrap select plugin requires a refresh call when options change so after i update my select options i dont know where to call $('.selectpicker').selectpicker('refresh');

I tried after setting new options but seems that the DOM hasnt been updated yet, so refresh makes no sense at that point, i need to refresh after DOM has been update for that select element.

Has anyone faced this before with success?, thanks.

[syntacticsolutions]

updateSelect:function(type,title,val){

            $(type).selectpicker({
                width:'100%',
                style:'btn-dropdownForm',
                title:title,
            })
            $(type).selectpicker('refresh');
            $(type).val(val)
            .change();

            this.currentProject = this.currentProject;
            //this forces the nexttick
}

[juannenna]

hi! longshot: i am running Vue 2.0 and im trying to get bootstrap-select to initialize, but to no avail. i just have NO CLUE where to put $('.selectpicker').selectpicker() so that it will be initialized after my API call. If i open the console on my browser and i manually type it, everything works fine, also works if i put it inside a method that i can call from a v-on:click event, however if i call the method from the $nextTick() function, it just doesnt work. Any ideas??

[fakiolinho]

I 've also lost a couple of hours trying to make it work. It doesn't work with watch. Try to force refresh in component's updated lifecycle hook.

Here is a version of my working component:

export default {
  props: {
    week: [String, Number],
    year: [String, Number],
  },

  mounted() {
    const $selectpicker = $(this.$el).find('.selectpicker');

    $selectpicker
      .selectpicker()
      .on('changed.bs.select', () => this.$emit('changeWeek', this.options[$selectpicker.val()]));
  },

  updated() {
    $(this.$el).find('.selectpicker').selectpicker('refresh');
  },

  destroyed() {
    $(this.$el).find('.selectpicker')
      .off()
      .selectpicker('destroy');
  },

  computed: {
    options() {
        // run some logic here to populate options
    }
  }
}

and how the select element looks like in my template:

<select class="form-control selectpicker bs-select">
  <option
    v-for="(option, index) in options"
    :key="index"
    :value="option.value"
    :selected="option.selected">
    {{ option.title }}
  </option>
</select>

[azeez55]

How can I install? can you send the npm comment

[crarau]

@azeez55 npm install bootstrap-select