触发更改不会更新 vuejs 绑定答案

【问题标题】：Triggering change doesn't update vuejs binding触发更改不会更新 vuejs 绑定
【发布时间】：2016-07-02 08:21:11
【问题描述】：

如果您更改第一个下拉列表中的值，它可以正常工作，但不能在第二个下拉列表中。请参阅下面的示例。

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>

【问题讨论】：

标签： javascript jquery html jquery-chosen vue.js

【解决方案1】：

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));
  }
});

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

【讨论】：