使用 Select2 Multiple - 与 vueJS2

Question

有什么好的方法可以使用 Select2 插件实现 select 多字段与 VuesJS2

我找到了这个

https://vuejs.org/v2/examples/select2.html

但这只是单个 Select，但我不明白如何将它变成多个 select 并输出 selected 项目的数组。

Vue.component('select2', {
  props: ['options', 'value'],
  template: '#select2-template',
  mounted: function () {
    var vm = this
    $(this.$el)
      .val(this.value)
      // init select2
      .select2({ data: this.options })
      // emit event on change.
      .on('change', function () {
        //vm.$emit('input', this.value)
        //vm.$emit('input', this.value)
        vm.$emit('input', this.value)
      })
  },
  watch: {
    value: function (value) {
      // update value
      $(this.$el).select2('val', value)
    },
    options: function (options) {
      // update options
      $(this.$el).select2({ data: options })
    }
  },
  destroyed: function () {
    $(this.$el).off().select2('destroy')
  }
})

var vm = new Vue({
  el: '#el',
  template: '#demo-template',
  data: {
    selected: [],
    options: [
      { id: 1, text: 'Hello' },
      { id: 2, text: 'World' }
    ]
  }
})

html, body {
  font: 13px/18px sans-serif;
}
select {
  min-width: 300px;
}

<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/select2@4.0.3/dist/css/select2.min.css">
<script src="https://unpkg.com/select2@4.0.3"></script>
<script src="https://unpkg.com/vue@2.1.6/dist/vue.js"></script>

<div id="el"></div>

<!-- using string template here to work around HTML <option> placement restriction -->
<script type="text/x-template" id="demo-template">
  <div>
    <p>Selected: {{ selected }}</p>
    <select2 :options="options" v-model="selected">
      <option disabled value="0">Select one</option>
    </select2>
  </div>
</script>

<script type="text/x-template" id="select2-template">
  <select>
    <slot></slot>
  </select>
</script>

Answer 1

我今天偶然发现了这个确切的问题，我只是想 post 答案，以防其他人有同样的疑问。

从 select2 发出时，您必须使用正确的方法从 select2 中挑选出结果。

替换

vm.$emit('input', this.value)

与

vm.$emit('input',  $(this).val())

这确保我们使用 jquThis 将使用包含所有选定 ids 的数组填充 v 模型（在您的示例中：selected）。

使用 Select2 Multiple - 与 vueJS2

Use Select2 Multiple - with vueJS2

javascript

vue.js

select2