Skip to content

Instantly share code, notes, and snippets.

@cwg999
Created December 28, 2018 16:00
Show Gist options
  • Save cwg999/de77d91301af91a71ab689ba9b9e780e to your computer and use it in GitHub Desktop.
Save cwg999/de77d91301af91a71ab689ba9b9e780e to your computer and use it in GitHub Desktop.
Select2 as a vue component
<template>
<select>
<slot></slot>
</select>
</template>
<script>
export default {
name:'Select2',
props: {
'value':{
required:true
},
'options':{
type:Object,
required:false
}
},
watch: {
value: function (value) {
this.reload(value);
}
},
methods:{
reload : function (value) {
var select = $(this.$el);
select.val(value || this.value);
select.select2('destroy');
select.select2(this.options||{});
}
},
mounted: function () {
var vm = this;
var select = $(this.$el);
select
.val(this.value)
.on('change', function () {
vm.$emit('input', this.value);
});
select.select2(this.options||{});;
},
updated: function () {
this.reload();
},
destroyed: function () {
$(this.$el).select2('destroy');
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment