有没有办法在 Vuetify 中获取所选 v-select 选项的索引？答案

【问题标题】：Is there a way to get the index of a selected v-select option in Vuetify?有没有办法在 Vuetify 中获取所选 v-select 选项的索引？
【发布时间】：2023-03-23 16:35:02
【问题描述】：

我是 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 可能会提供我需要的东西，但我不确定我应该分配给它什么

非常感谢任何帮助，谢谢！

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案1】：

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

删除

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

【讨论】：

【解决方案2】：

再次查看 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
     }
}

【讨论】：

不确定如何解决问题，许可证不是索引值。您实际上是如何从中获取索引的？你只是在传递一个属性。
@user12906858 的答案有正确的方法来从传递给方法的对象中找到索引。那是缺失的部分。

【解决方案3】：

您可以在v-select 中设置 id... 并这样做： document.getElementById("mySelect").selectedIndex

这是你需要的吗？

【讨论】：

感谢 Victor 的回复，不幸的是它正在返回 undefined