How to get/set select2 value in vuejs

Question

I am using vuejs and creating/deleting dynamic select, which is working fine.

Here is working fiddle : https://jsfiddle.net/nikleshraut/fgpdp700/2/

var vm = new Vue({
  el: "#app",
  data: {
    optionArr: [{id:1,price:100},{id:2,price:200}],
  	options: [{id:1,value:'option1'},{id:2,value:'option2'},{id:3,value:'option3'}]
  },
  mounted() {
  	console.log("help!!!!");
  	//$("#opt_select_0,#opt_select_1").select2();
  },
  methods: {
  	addOption: function(){
    	var index = Object.keys(this.optionArr).length;
    	this.optionArr.push({id:'',price:''});
      setTimeout(function(){
        //$("#opt_select_"+index).select2();
      },100);      
    },
    deleteOption: function(index){
    	this.optionArr.splice(index, 1);
    },
    getAll: function(){
    	console.log(this.optionArr);
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css">

<div id="app">
  <div>{{ $data.optionArr }}</div>
  <template v-for="(user_option,index) in optionArr">
  <select class="applySelect2" v-bind:id="'opt_select_'+index" on-change="print" v-model="user_option.id">
      <template v-for="option in options">
        <option v-bind:value="option.id">{{option.value}}</option>
      </template>
  </select> <input type="text" v-model="user_option.price"> <span style="cursor:pointer;color:red;" v-on:click="deleteOption(index)">delete</span><br/>
  </template><br/>
  <div><span style="cursor:pointer;" v-on:click="addOption">+add options</span></div>
  <br/>
  <div><span style="cursor:pointer;" v-on:click="getAll">Get All</span></div>
</div>

But if I want to use select2, getting or setting select2 value is not working as expected. Also deleting not working.here

https://jsfiddle.net/nikleshraut/fgpdp700/3/

Afrit

Answer 1

Try like this,

Your html code :

I have changed select tag name to select2

<div id="app">
  <div>{{ $data.optionArr }}</div>
  <template v-for="(user_option,index) in optionArr">
  <select2 class="applySelect2" v-bind:id="'opt_select_'+index" on-change="print" v-model="user_option.id">
      <template v-for="option in options">
        <option v-bind:value="option.id">{{option.value}}</option>
      </template>
  </select2> <input type="text" v-model="user_option.price"> <span style="cursor:pointer;color:red;" v-on:click="deleteOption(index)">delete</span><br/>
  </template><br/>
  <div><span style="cursor:pointer;" v-on:click="addOption">+add options</span></div>
  <br/>
  <div><span style="cursor:pointer;" v-on:click="getAll">Get All</span></div>
</div>
<script type="text/x-template" id="select2-template">
  <select>
    <slot></slot>
  </select>
</script>

Check your js code :

I have added new wrapper component for select2.

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)
      })
  },
  watch: {
    value: function (value) {
      // update value
      $(this.$el).val(value)
    },
    options: function (options) {
      // update options
      $(this.$el).select2({ data: options })
    }
  },
  destroyed: function () {
    $(this.$el).off().select2('destroy')
  }
})

var vm = new Vue({
  el: "#app",
  data: {
    optionArr: [{id:1,price:100},{id:2,price:200}],
    options: [{id:1,value:'option1'},{id:2,value:'option2'},{id:3,value:'option3'}]
  },
  mounted() {
    console.log("help!!!!");
    $("#opt_select_0,#opt_select_1").select2();
  },
  methods: {
    addOption: function(){
        var index = Object.keys(this.optionArr).length;
        this.optionArr.push({id:'',price:''});
      setTimeout(function(){
        $("#opt_select_"+index).select2();
      },100);      
    },
    deleteOption: function(index){
        this.optionArr.splice(index, 1);
    },
    getAll: function(){
        console.log(this.optionArr);
    }
  }
});

Here is the jsfiddle link

Sciolism

Wow its 99% working except deletion. If I delete 2nd from 3 rows it deletes last select2, but may be I could fix this myself. Thanks a lot for your time. – Afrit

Welcome !!! If my answer satisfies your problem requirement, you can accept my answer ! Thanks ! – Sciolism

Answer 2

Use v-select2-component instead of select2 plugin

1) Install v-select2-component

// npm install
npm install v-select2-component --save

2) import as global component.

// import Select2Component
import Select2 from 'v-select2-component';
Vue.component ('Select2', Select2);
new Vue ({
   // ...
})

3) in HTML add the select with select2 tag

<Select2 v-model="myValue" :options="myOptions" />
<h4> Value: {{myValue}} </h4>

 

4) in JavaScript add this code

export default {
    //declare Select2Component
    components: {Select2},
    data() {
       return {
           myValue: '',
           myOptions: ['op1', 'op2', 'op3'] // or [{id: key, text: value}, {id: key, text: value}]
       }
   }
}

You can read the documentation at https://www.npmjs.com/package/v-select2-component/v/0.1.6

Cariole

Answer 3

It works for me

$("#mySelectElement").select2({
  data: this.myDataOrigin
})
.on('change', function () {
  this.myVueVariable = $(this).select2("val");
});

Wethington