Bootstrap selectpicker VueJS 指令

Question

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

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

现在我可以完美地创建指令并使用该bind方法来调用selectpicker()元素上的方法。问题似乎是选项是在调用后设置的selectpicker()。因此，我需要等待直到设置选项，或者必须在selectpicker(refresh)设置选项时再次调用。

有谁知道这是否可能？

Answer 1

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

我的解决方案是使用一个组件并传入选项/选择名称和回调函数作为道具，这样我就可以确保它们都已加载。

超文本标记语言

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