触发更改不会更新 vuejs 绑定
Triggering change doesn't update vuejs binding
如果您更改第一个下拉菜单中的值,它可以正常工作,但不能在第二个下拉菜单中工作。请参阅下面的示例。
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>
Chosen 插件正在创建一个新的下拉菜单,因此 Vue 无法正确监视它。您必须在选择的 change
事件中手动更改 Vue:
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));
}
});
Fiddle: https://jsfiddle.net/89sbqy3b/
如果您更改第一个下拉菜单中的值,它可以正常工作,但不能在第二个下拉菜单中工作。请参阅下面的示例。
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>
Chosen 插件正在创建一个新的下拉菜单,因此 Vue 无法正确监视它。您必须在选择的 change
事件中手动更改 Vue:
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));
}
});
Fiddle: https://jsfiddle.net/89sbqy3b/