Use Select2 Multiple - with vueJS2

Question

Is there any good way to use the Select2 Plugin for select Multiple field with VuesJS2

I found this

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

but this is only single Select but i don't get it how to bring it to a multiple select and outputting the array of selected items.

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/[email protected]/dist/css/select2.min.css">
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]/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>

Can you put the code snippets you have tried which are not working? — Saurabh
– Saurabh, Commented Dec 20, 2016 at 14:24

user7815155 · Accepted Answer · 2017-04-04 15:11:07Z

1

I stumbled across this exact problem today and I just wanted to post the answer, in case somebody else is wondering the same.

When emitting from the select2, you have to use the proper way of picking out the results from the select2.

Replace

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

with

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

This makes sure that we use the jquThis will fill the v-model (in your example: selected) with an array containing all the selected ids.

answered Apr 4, 2017 at 15:11

user7815155

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Use Select2 Multiple - with vueJS2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related