有沒有辦法在 Vuetify 中獲取所選 v-select 選項的索引？

Question

我是 Vuetify 的新手，在檢索 v-select 組件上選定選項的索引時遇到了一些問題。

獲得索引后，我想根據單擊的選項填充文本字段。

我有一組對象，我正在從 firebase 中檢索這些對象並作為:items道具傳入。

我可以使用帶有 v-for 的標准select選項成功獲取索引以循環遍歷數組，然后使用@change調用使用事件對象獲取 selectedIndex 的函數。 但是，在嘗試使用 v-select 組件時，我似乎無法弄清楚

這有效：

<select @change="populateLicense" v-model="trim.shop">
    <option value="">Select Shop</option>
    <option v-for="item in shopdata" :key="item.id">
        {{ item.shopname}}
    </option>
</select>

方法：

populateLicense(e) {
    let index = e.target.selectedIndex - 1
    this.trim.license = this.shopdata[index].license
},

當前 v-select 組件（不工作）：

<v-select 
    outline 
    label="Select Shop" 
    :items="shopdata" 
    item-text="shopname" 
    item-value="" 
    v-model="trim.shop"
    @change="populateLicense"
>
</v-select>

我猜item-value可能提供我需要的東西，但我不確定我應該分配給它什么

非常感謝任何幫助，謝謝！

Answer 1

再次查看 vuetify 文檔后能夠解決它。 傳遞return-object道具是關鍵。

為可能有類似問題的任何人更新代碼！

v-選擇：

<v-select 
    outline 
    label="Select Shop" 
    :items="shopdata" 
    item-text="shopname" 
    v-model="trim.shop"
    return-object
    @change="populateLicense(trim.shop.license)"
>
</v-select>

方法：

methods: {
    populateLicense(license) {
        this.trim.license = license
     }
}

Answer 2

this.shopdata.findIndex(data => data === this.trim.shop)

消除

 item-text="shopname" 
 item-value="" 

Answer 3

您可以在v-select設置 id ... 並執行以下操作： document.getElementById("mySelect").selectedIndex

這是你需要的嗎？