Question

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

选择后选择Vue组件关闭下拉菜单

0 个答案: