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

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

这是工作小提琴：

var vm=新的Vue{ el:应用程序， 数据：{ optionArr:[{id:1，价格：100}，{id:2，价格：200}]， 选项：[{id:1，值：'option1'}，{id:2，值：'option2'}，{id:3，值：'option3'}] }, 安装{ 控制台。日志帮助！！！！； //$opt_select_0，opt_select_1.select2； }, 方法：{ addOption：函数{ var index=Object.keyshis.optionArr.length； this.optionArr.push{id:，price:}； setTimeoutfunction{ //$opt\u select\u+index.select2； },100; }, deleteOption:functionindex{ this.optionArr.patcheindex，1； }, getAll:函数{ console.logthis.optionArr； } } }; {{$data.optionArr}} {{option.value}} 删去 +添加选项 全部 试着这样,

您的html代码：

我已将select tag name更改为select2

---

下面是JSFIDLE

使用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中添加select with select2标记

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

您可以在

上阅读文档，它适合我

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

---

哇，它99%的工作除了删除。如果我从3行中删除第2行，它将删除最后一个select2，但可能我可以自己解决这个问题。非常感谢您的时间。欢迎！！！如果我的答案满足您的问题要求，您可以接受我的答案！谢谢

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

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

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