使用 Select2 Multiple - 与 vueJS2

Posted 2023-05-07

技术标签:

【中文标题】使用 Select2 Multiple - 与 vueJS2【英文标题】：Use Select2 Multiple - with vueJS2 【发布时间】：2017-05-05 17:55:06 【问题描述】：

有没有什么好的方法可以通过 VuesJS2 使用 Select2 插件来选择多个字段

我找到了这个

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

但这只是单选，但我不知道如何将其带入多选并输出所选项目的数组。

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>

【问题讨论】：

你能把你试过的sn-ps代码放上去吗？ 【参考方案1】：

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

当从 select2 发射时，您必须使用正确的方法从 select2 中提取结果。

替换