觸發更改不會更新vuejs綁定

Question

如果更改第一個下拉列表上的值，它將正常工作，但不會在第二個下拉列表中更改。看下面的例子。

var vm = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    fruits: ['Apple', 'Banana', 'Orange'] 
 
    }, 
 
    ready: function() { 
 
    $('.chosen-select').chosen({ width: '20%' }); 
 
    }, 
 
    watch: { 
 
    fruits: function() { 
 
     $('.chosen-select').trigger('chosen:updated'); 
 
    } 
 
    } 
 
});

.chosen-select{ display: initial !important } // for debuging purpose

<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.17/vue.min.js"></script> 
 
<div id="app"> 
 
    <select class="chosen-select" v-model="fruit"> 
 
    <option v-for="fruit in fruits" v-bind:value="fruit" v-text="fruit"></option> 
 
    </select> 
 
    <p>You like {{fruit}}</p> 
 
</div>

Answer 1

選上的插件是創建一個新的下拉列表中，因此它不會被正確的Vue觀看。你必須手動更改Vue公司在change事件上選擇：

var vm = new Vue({ 
    el: '#app', 
    data: { 
    fruit:"Apple", 
    fruits: ['Apple', 'Banana', 'Orange'] 
    }, 
    ready: function() { 
    $('.chosen-select').chosen({ width: '20%' }).change(function(e){ 
     this.fruit = e.currentTarget.value; 
    }.bind(this)); 
    } 
}); 

小提琴：https://jsfiddle.net/89sbqy3b/