Ràng buộc lựa chọn Select2 vào dữ liệu mẫu Vue js

Question

Tôi đang sử dụng select2 để nâng cao phần tử chọn html. Tôi muốn ràng buộc giá trị của phần tử select vào một biến Vue, tuy nhiên Select2 dường như đang ngăn chặn điều này.

Cách tốt nhất để đạt được sự ràng buộc dữ liệu và nghe sự kiện này trong khi giữ lại hành vi Select2 là gì. Tôi tưởng tượng đó là trường hợp liên kết các sự kiện select2 với cá thể Vue.

Tôi đã thực hiện a fiddle chứng minh vấn đề (không chạy dưới đây nhưng hoạt động trên jsfiddle):

$('#things').select2(); 
 

 
new Vue({ 
 
    el: "#vue-example", 
 
    data: { 
 
    thing: null, 
 
    thing2: null 
 
    }, 
 
    methods: { 
 
    log: function(str) { 
 
     $('#log').append(str + "<br>"); 
 
    } 
 
    } 
 
});

select { 
 
    width: 50%; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.8/vue.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 
<div id="vue-example"> 
 
    <label>Select2 Select Box</label> 
 
    <select name="things" id="things" v-model="thing" v-on="change: log('you changed thing1')"> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
    <option value="3">Three</option> 
 
    <option value="4">Four</option> 
 
    <option value="5">Five</option> 
 
    </select> 
 
    <br> 
 
    <br> 
 
    <label>Native Select Box</label> 
 
    <select name="things" id="things" v-model="thing2" v-on="change: log('you changed thing2')"> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
    <option value="3">Three</option> 
 
    <option value="4">Four</option> 
 
    <option value="5">Five</option> 
 
    </select> 
 
    <pre>{{ $data | json }}</pre> 
 
    <div id="log"> 
 

 
    </div> 
 
</div>

Answer 1

Giải pháp này làm việc cho các plugin Chosen, nhưng bạn có thể làm tương tự điều với Select2 để làm cho nó hoạt động:

http://jsfiddle.net/simplesmiler/qfy6s9Lj/8/

Vue.directive('chosen', { 
    twoWay: true, // note the two-way binding 
    bind: function() { 
     $(this.el) 
      .chosen({ 
       inherit_select_classes: true, 
       width: '30%', 
       disable_search_threshold: 999 
      }) 
      .change(function(ev) { 
       // two-way set 
       this.set(this.el.value); 
      }.bind(this)); 
    }, 
    update: function(nv, ov) { 
     // note that we have to notify chosen about update 
     $(this.el).trigger("chosen:updated"); 
    } 
}); 

var vm = new Vue({ 
    data: { 
     city: 'Toronto', 
     cities: [{text: 'Toronto', value: 'Toronto'}, 
       {text: 'Orleans', value: 'Orleans'}] 
    } 
}).$mount("#search-results"); 

Answer 2

Tôi đã tạo một plugin cho select2 cách đây vài ngày.

https://github.com/halupi/vue-select2

Hy vọng điều đó sẽ hữu ích!

Answer 3

câu trả lời của câu trả lời là chính xác. Bạn chỉ cần xác định và cập nhật mã đó để phản ánh sự khác biệt trong Select2.

http://jsfiddle.net/qfy6s9Lj/10/

Vue.directive('selecttwo', { 
 
    twoWay: true, 
 
    bind: function() { 
 
    $(this.el).select2() 
 
    .on("select2:select", function(e) { 
 
     this.set($(this.el).val()); 
 
    }.bind(this)); 
 
    }, 
 
    update: function(nv, ov) { 
 
    $(this.el).trigger("change"); 
 
    } 
 
}); 
 

 
new Vue({ 
 
    el: "#vue-example", 
 
    data: { 
 
    thing: null, 
 
    thing2: null 
 
    }, 
 
    methods: { 
 
    log: function(str) { 
 
     $('#log').append(str + "<br>"); 
 
    } 
 
    } 
 
});

select { 
 
    width: 50%; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.8/vue.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 
<div id="vue-example"> 
 
    <label>Select2 Select Box</label> 
 
    <select name="things" id="things" v-model="thing" v-selecttwo="thing" v-on="change: log('you changed thing1')"> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
    <option value="3">Three</option> 
 
    <option value="4">Four</option> 
 
    <option value="5">Five</option> 
 
    </select> 
 
    <br> 
 
    <br> 
 
    <label>Native Select Box</label> 
 
    <select name="things" id="things" v-model="thing2" v-selecttwo="thing2" v-on="change: log('you changed thing2')"> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
    <option value="3">Three</option> 
 
    <option value="4">Four</option> 
 
    <option value="5">Five</option> 
 
    </select> 
 
    <pre>{{ $data | json }}</pre> 
 
    <div id="log"> 
 

 
    </div> 
 
</div>