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}], 
 
    \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>

을하지만 선택 2 값을 얻거나 설정, select2을 사용하려는 경우 예상대로 작동하지 않는 경우 : 여기

는 바이올린을 노력하고 있습니다. 또한 삭제

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

Answer 1

는이 같은 시도 working.here하지

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 용 새 래퍼 구성 요소를 추가했습니다. 그 99 %가 삭제 제외한 작업 와우

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