Vuetify 从 <v-select> 获取选定的索引答案

【问题标题】：Vuetify get selected index from <v-select>Vuetify 从 <v-select> 获取选定的索引
【发布时间】：2021-06-08 21:10:11
【问题描述】：

经过多次搜索和多次尝试，我终于找到了一种从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>

非常感谢。

【问题讨论】：

标签： vue.js vuejs2 vue-component vuetify.js html-select

【解决方案1】：

如果获取索引的原因是为了获取与选择相关的对象，更好的方法是使用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>

【讨论】：