Javascript 选择后，从“关闭vue组件”下拉列表中选择

试图创建一个简单的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>

模型：{{selected}}

没有模型：{{selected}

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: [],
  },
})

Vue.component（'selectize'{
道具：['options'，'value']，
模板：“”，
安装的（）{
$（此。$el）。选择({
初始化：（）=>{
this.$el.selectize.setValue（this.value，true）
},
onChange:（值）=>{
此.$emit（'input'，value）
},
…这个。合并设置，
})
},
计算：{
合并设置（）{
返回$.extend({
选项：这个选项，
}，$（this.$el）.data（））
},
},
观察：{
价值（价值）{
此.el.selectize.setValue（值，true）
},
},
})
新Vue({
el:“应用程序”，
数据：{
选项：[
{值：1，文本：“一”}，
{值：2，文本：“两”}，
{值：3，文本：“三”}，
{值：4，文本：“四”}，
],
选定：[]，
},
})

---

我还创建了一个jsfiddle:

我不为这个解决方案感到自豪，但这是我能想出的更好的办法

创建一个

SELF\u CHANGED

属性，以检查更改是由内部还是外部触发的

Vue.component（'selectize'{
道具：['options'，'value']，
数据（）{
返回{
自我改变：错误
}
},
模板：`
`,
安装的（）{
$（此。$el）。选择({
初始化：（）=>{
this.$el.selectize.setValue（this.value，true）
},
onChange:（值）=>{
this.SELF\u CHANGED=true
此.$emit（'input'，value）
},
…这个。合并设置，
})
},
计算：{
合并设置（）{
返回$.extend({
选项：这个选项，
}，$（this.$el）.data（））
},
},
观察：{
价值（价值）{
如果（！this.SELF_已更改）{
此.el.selectize.setValue（值，true）
}
this.SELF\u CHANGED=false
},
},
})
新Vue({
el:“应用程序”，
数据：{
选项：[{
价值：1，
正文：“一”
},
{
价值：2，
正文：“两个”
},
{
价值：3，
正文：“三”
},
{
价值：4，
正文：“四”
},
],
选定：[]，
},
})

正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
#应用程序{
背景：#fff；
边界半径：4px；
填充：20px；
过渡：均为0.2s；
}

模型：{{selected}}

没有模型：{{selected}

一年前我曾与vue+selectize合作过。检查是否可以帮助您。@Imarqs我已经检查了回购协议，但无法确定您是如何设置价值的。如何设置selectize的值以不关闭下拉列表？如果我没有错，您可以在上传递

closeAfterSelect:false

@Imarqs，我正在使用selectize v0.12.6，默认情况下，

closeAfterSelect

选项为

false

。现在我想起了我是如何解决的。我会把它写在我的答案里。