引导选择选择器 VueJS 指令

Posted

技术标签:

【中文标题】引导选择选择器 VueJS 指令【英文标题】:Bootstrap selectpicker VueJS directive 【发布时间】:2015-12-26 22:15:35 【问题描述】:

我正在尝试为 Bootstrap 构建一个自定义指令,该指令将 <select> 输入从 Bootstrap selectpicker 输入到“selectpicker”中 此外,我希望该指令使用 VueJS 的默认 options 功能来填充 <select> 上的选项 所以html会是这样的:

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

现在我可以完美地创建指令并使用bind 方法在元素上调用selectpicker() 方法。问题似乎是选项是在调用selectpicker() 之后设置的。 所以不知何故,我需要等到设置选项,或者在设置选项时我必须再次调用selectpicker(refresh)

有人知道这是否可行吗?

【问题讨论】:

【参考方案1】:

我这样做了,它对我有用。

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

【讨论】:

如果 【参考方案2】:

仅当您从服务器提供选项时,提供的答案才有效。尝试使用 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'
    );

);

【讨论】:

【参考方案3】:

我改变了一点 mocheaz 的解决方案。如果选择标签是动态放置的,它已经设置了初始值:

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

【讨论】:

【参考方案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>

【讨论】:

【参考方案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>

【讨论】:

以上是关于引导选择选择器 VueJS 指令的主要内容,如果未能解决你的问题,请参考以下文章

如何使用带有 vuejs 指令和 browserify 的引导选择插件

vuejs在选择后获取日期选择器的值

Laravel 黄昏没有看到 vuejs 选择器

为啥这个引导日期选择器不显示日期选择器?

Vuejs:如何实现响应式禁用日期选择器

计算属性设置器导致 vuejs / javascript 在日期选择器焦点上崩溃浏览器