javascript - 触发更改不会更新 vuejs 绑定(bind)

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 无法正确监视它。您必须在选择的 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/