经过多次搜索和尝试,我终于找到了一种从<v-select>
中获取所选索引的方法。 Vuetify 中的元素。
但我认识到它不是干净的代码,但它有效并解决了我的问题。
但是,如果有人能帮助我稍微简化一下这件事,我将不胜感激。
这是我的代码:
<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>
非常感谢。
最佳答案
如果获取索引的原因是为了获取与选择相关的对象,更好的方法是使用return-object
Prop 。
也可以使用 item-text
指定 name
字段。
您可以删除 change
监听器,因为 personSelected
将包含该对象。
<v-select
v-model="personSelected"
:items="personData"
item-text="name"
label="Select a person"
return-object
outlined>
</v-select>
关于vue.js - Vuetify 从 <v-select> 中获取选定的索引,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66572981/