尝试创建一个简单的selectize vue组件,但是我遇到问题,每当我选择一个选项并在组件中使用v-model时,下拉列表会自动关闭,同时删除v-model,下拉列表保持打开状态,直到达到指定的最大项目 .
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: [],
},
})
我还创建了一个jsfiddle:https://jsfiddle.net/uk0g69s4/19/
1 回答
我并不为这个解决方案感到自豪,但这是我能想到的更好的事情 .
创建
SELF_CHANGED
属性以检查更改是在内部还是外部触发...