Skip to content

Instantly share code, notes, and snippets.

@jasonlfunk
Last active January 29, 2020 16:37
Show Gist options
  • Save jasonlfunk/a7befde14541e6e9c959f5e383e9e31f to your computer and use it in GitHub Desktop.
Save jasonlfunk/a7befde14541e6e9c959f5e383e9e31f to your computer and use it in GitHub Desktop.
Vue.component('select2', {
props: ['options', 'value'],
template: `
<div>
<select multiple ref='select'>
<slot></slot>
</select>
</div>
`,
mounted: function () {
var vm = this;
$(this.$refs.select)
.select2({ data: this.options })
.on('change', function (ev, args) {
if (!(args && "ignore" in args)) {
vm.$emit('input', $(this).val())
}
});
Vue.nextTick(() => {
$(this.$refs.select)
.val(this.value)
.trigger('change', { ignore: true })
});
},
watch: {
value: function (value, oldValue) {
// update value
$(this.$refs.select)
.val(this.value)
.trigger('change', { ignore: true });
},
options: function (options) {
// update options
$(this.$refs.select).select2({ data: options })
}
},
destroyed: function () {
$(this.$refs.select).off().select2('destroy')
}
});
@bezborodow
Copy link

bezborodow commented Mar 7, 2018

Hey, I have copied and expanded this to support a few extra features such as ajax. I have a question. What is the purpose of Vue.nextTick()? Also, Vue is undefined when I try to access nextTick() from within the .vue component -- is there a special way of accessing this function from within a .vue file?

I posted the code in a fork.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment