如何在 v-select 中调用选择更改的函数？ [复制]

Posted 2023-02-22

【中文标题】如何在 v-select 中调用选择更改的函数？ [复制]

【英文标题】：How to call a function on selection change in v-select? [duplicate]

【发布时间】：2018-12-11 23:01:09

【问题描述】：

我目前正在开发 Vuetify，尝试使用 html 从 v-select 调用 Vue.js 中的方法。但是@change 事件没有正确选择条件。

<v-layout row wrap>
    <v-flex xs12 sm4>
      <!-- DropDown Combo -->
      <v-select v-model="selected"
        :items='dropdown_tables'
        append-icon='fa-angle-down'
        label='Select'
        persistent-hint
        return-object
        single-line
        @change='RefreshGrid'
        target='#dropdown'>
        </v-select>
        <!-- <p> `$selected` </p> // this code gives the selected combo text -->
    </v-flex>
   </v-layout>
</v-container>

我的 Javascript 函数

 methods: 
   RefreshGrid: function () 
   let cName;
   if (this.selected === 'Business Area') 
    cName = 'businessArea';
    else if (this.selected === 'Council') 
     cName = 'council';
   
   let obj = 
    vm: this,
    collectionName: cName,
    action: 'masterData/setMasterData',
    mutation: 'setMasterData'
   ;
   this.$store.dispatch(obj.action, obj);
 

因此，当我使用 on change 并单击委员会时，它会在网格中显示 businessArea 数据，反之亦然。试图弄清楚 v-select 的索引是如何工作的。

【参考方案1】：

因此，使用 @input 代替 @change 可以正常工作。

【讨论】：

如何传递选定的值？

@MHFuad 使用v-model="value"，然后简单地从数据中获取值