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/

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

1 个答案: