引导选择选择器 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 指令的主要内容,如果未能解决你的问题,请参考以下文章