Bootstrap selectpicker VueJS 指令

Question

我正在嘗試為 Bootstrap 構建一個自定義指令，該指令將<select>輸入從Bootstrap selectpicker輸入到“selectpicker”中此外，我希望該指令使用 VueJS 的默認options功能來填充<select>上的選項，所以html 將是這樣的：

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

現在我可以完美地創建指令並使用bind方法調用元素上的selectpicker()方法。 問題似乎在於選項是在調用selectpicker()之后設置的。 所以不知何故，我需要等到選項設置好，或者在設置選項時我必須再次調用selectpicker(refresh) 。

有誰知道這是否可能？

Answer 1

提供的答案僅在您從服務器提供選項時才有效。 嘗試使用 Vue 數據作為選項初始化 Bootstrap-select 總是在選項呈現之前被調用。

我的解決方案是使用一個組件並將選項/選擇名稱和回調函數作為道具傳遞，這樣我就可以確保它們都已加載。

HTML

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

JS - 選擇器組件

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

Answer 2

我已經改變了 mocheaz 的一些解決方案。 如果動態放置 select 標簽，它已經設置了初始值：

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

Answer 3

我這樣做了，它對我有用。

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

Answer 4

這對於那些正在尋找使用 bootstrap-select 和 vue.js (v2.5) 能力的人很有用

指示：

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>

Answer 5

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

});

用法 ：

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