Having trouble developing a straightforward selectize vue component. The issue arises when I select an option while using v-model within the component; the dropdown closes automatically. However, when I remove the v-model, the dropdown remains open until the maximum number of items is reached.
HTML
<div id="app">
<p>With Model: {{ selected }}</p>
<selectize v-model="selected" :options="options" data-max-items="2"></selectize>
<p>Without Model: {{ selected }}</p>
<selectize :options="options" data-max-items="2"></selectize>
</div>
JS
Vue.component('selectize', {
props: ['options', 'value'],
template: '<select><slot></slot></select>',
mounted() {
$(this.$el).selectize({
onInitialize: () => {
this.$el.selectize.setValue(this.value, true)
},
onChange: (value) => {
this.$emit('input', value)
},
...this.mergedSettings,
})
},
computed: {
mergedSettings() {
return $.extend({
options: this.options,
}, $(this.$el).data())
},
},
watch: {
value(value) {
this.$el.selectize.setValue(value, true)
},
},
})
new Vue({
el: "#app",
data: {
options: [
{ value: 1, text: "One" },
{ value: 2, text: "Two" },
{ value: 3, text: "Three" },
{ value: 4, text: "Four" },
],
selected: [],
},
})
Check out this jsfiddle for a demonstration: https://jsfiddle.net/uk0g69s4/19/