jquery - Bootstrap selectpicker VueJS 指令

Question

我正在尝试为 Bootstrap 构建一个自定义指令，它生成一个 <select>从 Bootstrap selectpicker 输入“选择器” 另外我希望这个指令使用默认的 options VueJS 用于填充 <select> 选项的功能 所以 html 应该是这样的:

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

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

有人知道这是否可行吗？

Answer 1

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

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

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