select vue 获取name_在vue的组件中获取select2插件的值

var MiSelectComponent = Vue.extend({

/**

* 参数

* name html的name标签

* style style代码

* class class标签

* data.selected 选中项的值

* data.options 选项数组

* [{ text: '审核通过', value: '1'},{ text: '审核通过', value: '2'}]

**/

template:

'<div class="dataTables_filter filterBox-item">' +

'<select v-mi-select="name" name="{{ name }}" style="{{ style }}" class="mi_selected {{ class }}" v-model="data.selected">'

+'<option track-by="$index" v-for="option in data.options"  v-bind:value="option.value">{{ option.text }}</option>'

+'</select>' +

'</div>'

,

props: ['data', 'name', 'style' ,'class'],

});

Vue.directive('mi-select', {

twoWay: true,

priority: 1000,

params: ['options', 'data'],

bind: function () {

var _self = this;

console.log(_self);

$(this.el)

.select2()

.on('change', function () {

_self.set(this.value)

})

},

update: function (value) {

$(this.el).val(value).trigger('change')

},

unbind: function () {

$(this.el).off().select2('destroy')

}

});

var vm = new Vue({

el: '#el',

components: {

c: MiSelectComponent,

},

data: {

selected: 0,

sa: {

selected: 2,

options: [

{ text: '审核状态', value: ''},

{ text: '审核通过', value: '1'},

{ text: '审核失败', value: '2'},

]

},

sb: {

selected: 1,

options: [

{ text: '审核状态', value: ''},

{ text: '审核通过', value: '1'},

{ text: '审核失败', value: '2'},

]

},

}

})

<div id='el'>

<c name="aaaaaa" v-bind:options.sync="sb.options" :selected.sync="sb.selected"></c>

<c name="bbbbbb" v-bind:options.sync="sb.options" :selected.sync="sb.selected"></c>

</div>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值