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

Posted 2023-02-22

【中文标题】如何在 vuejs 中获取/设置 select2 值

【英文标题】：How to get/set select2 value in vuejs

【发布时间】：2017-05-28 18:41:25

【问题描述】：

我正在使用 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/

【参考方案1】：

对我有用

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

【参考方案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阅读文档

【参考方案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

【讨论】：

哇，除了删除之外，它的 99% 都在工作。如果我从 3 行中删除第 2 行，它会删除最后一个 select2，但也许我可以自己解决这个问题。非常感谢您的宝贵时间。

欢迎！如果我的回答满足你的问题要求，你可以接受我的回答！谢谢！