Skip to content
This repository has been archived by the owner. It is now read-only.

Using Vue with bootstrap select and refreshing options #397

Open
rumeau opened this issue Sep 14, 2015 · 5 comments

Comments

Projects
None yet
6 participants
@rumeau
Copy link

commented Sep 14, 2015

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

This comment has been minimized.

Copy link

commented Dec 5, 2016

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

This comment has been minimized.

Copy link

commented Mar 27, 2017

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

This comment has been minimized.

Copy link

commented Jun 7, 2017

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

This comment has been minimized.

Copy link

commented Dec 20, 2017

How can I install? can you send the npm comment

@crarau

This comment has been minimized.

Copy link

commented Dec 31, 2017

@azeez55 npm install bootstrap-select

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.