经过多次搜索和多次尝试,我终于找到了一种从 Vuetify 中的 <v-select>
元素中获取所选索引的方法。
但我意识到这不是干净的代码,但它有效并解决了我的问题。
不过,如果有人能帮我简化一下这件事,我将不胜感激。
这是我的代码:
<template>
<v-select
v-model="personSelected"
@change="getIdFromPeopleSelect"
:items="personData"
label="Select a person"
outlined>
</v-select>
</template>
<script>
export default {
name: "App",
data() {
return {
personSelected: "",
//objects inside this array was extracted from a firebase query ;-) //
personData: [
{name: "John", city: "New York"},
{name: "Mary", city: "Berlin"},
{name: "Claudia", city: "Dubai"}
]
};
},
methods: {
getIdFromPeopleSelect() {
// this could be better to get selectedIndex from v-select
return console.log(this.personData.findIndex(x => x.name=== this.personSelected));
}
</script>
非常感谢。
答案 0 :(得分:2)
如果获取索引的原因是获取与选择相关的对象,更好的方法是使用 return-object
属性。
还使用 item-text
指定 name
字段。
您可以删除 change
侦听器,因为 personSelected
将包含该对象。
<v-select
v-model="personSelected"
:items="personData"
item-text="name"
label="Select a person"
return-object
outlined>
</v-select>