Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 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/

触发更改不会更新vuejs绑定

1 个答案: