NutzCN Logo
问答 bootstrap-select改为vue组件,修改数据select并没有改变
发布于 2261天前 作者 zp8821138 4881 次浏览 复制 上一个帖子 下一个帖子
标签:

组件为如下,抄的网上的。

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>&nbsp;更改</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不是很了解,就项目再用。

2 回复

jquery插件别跟vue混着用

可是要保持样式一致。。。只能选用bootstrap-select了。其他都是用vue做的。

添加回复
请先登陆
回到顶部