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