以编程方式设置 v-select 值不会在 vuetify 中触发 @change

Question

我试图以编程方式设置 v-select 值，但是关联的 @change 事件不会触发。如果我手动选择该选项，则事件会按预期触发。

模板：

<div id="app">
<v-app dark>
  <v-select 
    v-model="currentItem" 
    :items="items"
    @change="itemChanged"
  />
</v-app>
</div>

JS：

Vue.use(Vuetify);

var vm = new Vue({
    el: "#app",
  methods: {
    itemChanged(item) {
        console.log('item changed',item);
    }
  },
  data: {
    currentItem: '',
    items: [
        { text: "Name", value: 'name' },
      { text: "Number", value: 'number' },
      { text: "Inputs", value: 'inputs' }
    ]
  },
  mounted() {
    setTimeout(() => {
        this.currentItem = 'inputs';
    }, 2000);
  }
});

该的jsfiddle是这里

除了在以编程方式设置值时手动调用该函数之外，是否有人有任何解决方案？

Answer 1

该change事件被以这样的方式定义，因此它是当输入是由用户交互更改发射（见事件文档）。如果要监视所有更改，可以使用该input事件：

<v-select 
  v-model="currentItem" 
  :items="items"
  @input="itemChanged"/>

https://jsfiddle.net/0qbomzta/

或者添加一个观察者来观看的currentItem：

<div id="app">
<v-app dark>
  <v-select 
    v-model="currentItem" 
    :items="items"/>
</v-app>
</div>

在Vue实例中，添加：

watch: {
  currentItem (newVal) {
    console.log('item changed', newVal);
  }
},

https://jsfiddle.net/w5voub3h/