以编程方式设置 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 is here

在以编程方式设置值时，除了手动调用函数之外，还有其他解决方案吗？

Answer 1

change 事件是这样定义的，所以它是emitted when the input is changed by user interaction (see the event documentation)。如果要监控所有更改，可以使用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/