Как получить/установить значение select2 в vuejs

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}], 
 
    \t options: [{id:1,value:'option1'},{id:2,value:'option2'},{id:3,value:'option3'}] 
 
    }, 
 
    mounted() { 
 
    \t console.log("help!!!!"); 
 
    \t //$("#opt_select_0,#opt_select_1").select2(); 
 
    }, 
 
    methods: { 
 
    \t addOption: function(){ 
 
    \t var index = Object.keys(this.optionArr).length; 
 
    \t this.optionArr.push({id:'',price:''}); 
 
     setTimeout(function(){ 
 
     //$("#opt_select_"+index).select2(); 
 
     },100);  
 
    }, 
 
    deleteOption: function(index){ 
 
    \t this.optionArr.splice(index, 1); 
 
    }, 
 
    getAll: function(){ 
 
    \t 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, получения или установки значения ВЫБ.2 не работает, как ожидалось. Также удаление не working.here

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

Answer 1

Попробуйте, как это,

Ваш код HTML:

Я изменял выберите имя тега ВЫБ.2

<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