选择后选择vue组件关闭下拉菜单答案

【问题标题】：Selectize vue component closing dropdown after selection选择后选择vue组件关闭下拉菜单
【发布时间】：2019-02-17 02:29:15
【问题描述】：

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

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/

【问题讨论】：

我在一年前使用 vue + selectize。检查this repo是否可以帮助您。
@Imarqs 我已经检查了 repo，但无法弄清楚你是如何设置值的。如何设置 selectize 的值不关闭下拉菜单？
如果我没记错的话，在component creation你可以通过optioncloseAfterSelect: false。
@Imarqs 我正在使用 selectize v0.12.6 和 closeAfterSelect 选项默认为 false github.com/selectize/selectize.js/blob/v0.12.6/dist/js/…
我明白了。现在我记得我是如何解决它的。我会把它放在我的答案中。

标签： javascript vue.js vuejs2 vue-component selectize.js

【解决方案1】：

我对这个解决方案并不感到自豪，但这是我能想到的更好的解决方案。

创建SELF_CHANGED 属性以检查更改是内部触发还是外部触发...

Vue.component('selectize', {
  props: ['options', 'value'],
  data() {
    return {
      SELF_CHANGED: false
    }
  },
  template: `
    <select>
        <slot></slot>
    </select>
  `,
  mounted() {
    $(this.$el).selectize({
      onInitialize: () => {
        this.$el.selectize.setValue(this.value, true)
      },

      onChange: (value) => {
        this.SELF_CHANGED = true
        this.$emit('input', value)
      },

      ...this.mergedSettings,
    })
  },

  computed: {
    mergedSettings() {
      return $.extend({
        options: this.options,
      }, $(this.$el).data())
    },
  },

  watch: {
    value(value) {
      if (!this.SELF_CHANGED) {
        this.$el.selectize.setValue(value, true)
      }
      this.SELF_CHANGED = false
    },
  },
})

new Vue({
  el: "#app",
  data: {
    options: [{
        value: 1,
        text: "One"
      },
      {
        value: 2,
        text: "Two"
      },
      {
        value: 3,
        text: "Three"
      },
      {
        value: 4,
        text: "Four"
      },
    ],
    selected: [],
  },
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sifter/0.5.3/sifter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/microplugin/0.0.3/microplugin.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/selectize.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>

<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>

【讨论】：