Bootstrap selectpicker VueJS directive

Question

I'm trying to build a custom directive for Bootstrap that makes a <select> input into a "selectpicker" from Bootstrap selectpicker Also I would like this directive to use the default options functionality of VueJS for filling the options on a <select> So the html would be something like this:

<select v-selectpicker="myValue" options="myOptions"></select>

Now I can create the directive perfectly and use the bind method to call the selectpicker() method on the element. The problem seems to be the fact that the options are set after the call to selectpicker(). So somehow I need to either wait until the options are set, or I have to do another call to selectpicker(refresh) when the options are set.

Does anyone know if this is possible?

score 5 · Answer 1 · edited Jun 20 '20 at 09:12

The answer provided only works if you're serving your options from the server. Trying to init Bootstrap-select using Vue data as options always has it getting called before the options are rendered.

My solution was to use a component and pass in the options / select name and callback function as props that way I can be sure they are all loaded.

HTML

<select-picker :name.sync="itemsPerPage" :options.sync="itemsPerPageOptions" :function="changeItemsPerPage"></select-picker>

JS - Selectpicker Component

Vue.component('select-picker', {
template:'<select v-model="name" class="themed-select" @change="function">' +
'<option v-bind:value="option.value" v-for="option in options">{{ option.label }}</option>' +
'</select>',
name: 'selectpicker',
props: ['options', 'name', 'function'],
updated: function() {
    console.log(this);
    $(this.$el).selectpicker({
        iconBase: 'fa',
        tickIcon: 'fa-check'
    });
}
});

score 1 · Answer 2 · answered Oct 13 '16 at 12:29

I've changed a little solution of mocheaz. It already sets initial value if select tag is placed dynamically:

require('bootstrap-select');

Vue.directive('selectpicker',
{
    twoWay: true,

    bind()
    {
        $(this.el).selectpicker();

        $(this.el).on('change', function(e) {
            this.set($(this.el).val());
        }.bind(this));
    },

    update(newValue)
    {
        $(this.el).val(newValue);
        $(this.el).selectpicker('val', newValue);
    },

    unbind()
    {
        $(this.el).selectpicker('destroy');
    }
});

score 1 · Answer 3 · answered Apr 12 '20 at 11:24

Vue.directive('selectpicker',{
inserted:function(el) {     
    jQuery(el).selectpicker({
        title: 'Choose...',
        liveSearch:true,
        dataHeader:"Type in to filter",
        style: 'btn btn-default btn-round',
        size: 10
    }).selectpicker('render');

},
componentUpdated:function(el, binding) {
    jQuery(el).selectpicker('val', binding.value);
    jQuery(el).selectpicker('refresh');
}

});

Usage :

<select class="form-control" v-model="causeOfLoss" v-selectpicker="causeOfLoss"> ... </select>

score 0 · Answer 4 · edited Nov 28 '15 at 05:48

0

I did this and it worked for me.

Vue.directive('selectpicker', {
    twoWay: true,
    bind: function() {
        $(this.el).on("change", function(e) {
            this.set($(this.el).val());
        }.bind(this));
    },
    update: function(nv, ov) {
        $(this.el).trigger("change");
    }
});

edited Nov 28 '15 at 05:48

veksen

6,863
5
20
33

answered Nov 27 '15 at 08:33

mocheaz

29
7

It seems it does not set the initial value if – Łukasz Kuczmaja Oct 13 '16 at 12:23

score 0 · Answer 5 · answered Apr 20 '18 at 10:18

this will be useful for those who are looking for the ability to use bootstrap-select and vue.js (v2.5)

Directive:

Vue.directive('selectpicker',
{
    inserted(el) {
        $(el).selectpicker(
            {/*options*/},
        });
    },

    update(el, binding) {        
        $(el).selectpicker('val', binding.value);
    },

    componentUpdated(el) {
        $(el).selectpicker('refresh');
    },

    unbindel() {
        $(el).selectpicker('destroy');
    }
});

html:

<select 
    class="selectpicker form-control" 
    v-selectpicker="mySelectedModel" 
    v-model="mySelectedModel">
    <!-- options -->
</select>

Bootstrap selectpicker VueJS directive

5 Answers5

HTML

JS - Selectpicker Component

Linked