组件为如下,抄的网上的。
Vue.component('vm-select', {
props : ['options', 'value', 'multiple', 'method', 'load', 'index', 'childidx'],
template : "<select :multiple='multiple' class='selectpicker form-control' data-live-search='true' title='请选择' data-live-search-placeholder='搜索'><option :value='option.id' v-for='option in options'>{{ option.name }}</option></select>",
mounted : function () {
var vm = this;
$(this.$el).selectpicker('val', this.value != null ? this.value : null);
$(this.$el).on('changed.bs.select', function () {
vm.$emit('input', $(this).val());
if (typeof(vm.method) != 'undefined') {
vm.method(vm.index, vm.childidx, this.value);
}
});
$(this.$el).on('show.bs.select', function () {
if (typeof(vm.load) != 'undefined') {
vm.load(vm.index, vm.childidx);
}
});
},
updated : function () {
$(this.$el).selectpicker('refresh');
},
destroyed : function () {
$(this.$el).selectpicker('destroy');
}
});
测试如下
<div class="wrapper" id="dpLTE" v-cloak>
<vm-select :options="select.options" v-model="select.value":multiple="select.multiple" ></vm-select>
<a class="btn btn-primary" @click="change"><i class="fa fa-search"></i> 更改</a>
</div>
<script>
var vm = new Vue({
el : '#dpLTE',
data : {
select:{
value:[1,2,3],
multiple:'multiple',
options:[
{id:1,name:'广东省'},
{id:2,name:'广西省'},
{id:3,name:'福建省'},
{id:4,name:'湖南省'},
{id:5,name:'山东省'}
]
}
},
methods : {
change: function(){
alert("----"+vm.select.value);
vm.select.value = [1];
}
}
});
</script>
点击按钮以后 select.value确实改变了 但是选中的没有变为广东省。 vue不是很了解,就项目再用。