Bootstrap Selectpicker VueJS指令 [英] Bootstrap selectpicker VueJS directive

问题描述

我正在尝试为Bootstrap构建自定义指令，该指令将<select>输入从

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>

现在，我可以完美地创建指令，并使用bind方法调用元素上的selectpicker()方法.问题似乎是在调用selectpicker()之后设置了选项的事实. 因此，无论如何，我需要等到设置选项后，或者在设置选项时必须再次调用selectpicker(refresh).

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?

推荐答案

仅当您从服务器提供选项时，提供的答案才有效.尝试使用Vue数据作为选项初始化Bootstrap-select总是会在呈现选项之前调用它.

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.

我的解决方案是使用一个组件，然后将options/select name和callback函数作为prop传递，这样我就可以确保它们都已加载.

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.

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

JS-Selectpicker组件

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

这篇关于Bootstrap Selectpicker VueJS指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！