如何在 vuejs 中获取/设置 select2 值

Question

我正在使用 vuejs 并创建/删除动态 select，它工作正常。

这是工作小提琴：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>

但如果我想使用 select2，获取或设置 select2 值不会按预期工作。也删除不工作。这里

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

Answer 1

对我有用

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

Answer 2

使用 v-select2-component 代替 select2 插件

1) 安装 v-select2-component

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

2) 导入为全局组件。

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

3) 在 HTML 中添加带有 select2 标记的选择

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

 

4) 在 JavaScript 中添加此代码

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

您可以在https://www.npmjs.com/package/v-select2-component/v/0.1.6阅读文档

Answer 3

这样试试，

你的html代码：

我已将选择标签名称更改为 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>

检查你的 js 代码：

我为 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);
    }
  }
});

这里是 jsfiddle link