如何从Firebase获取用户姓和名并填充到v-autocomplete组件

问题原因 #

你绑定到v-autocomplete的items是对象数组，组件默认会调用对象的toString()方法渲染选项，所以会显示[object Object]，你需要手动指定组件用对象的哪些字段作为显示内容和选中值。

解决方法1：配置item-title和item-value属性（最简便） #

这两个是Vuetify选择类组件的内置属性，item-title控制选项显示的文本，item-value控制选中后绑定到v-model的取值：

• 如果你需要自定义拼接姓名（比如患者数据存了firstName和lastName两个字段），可以直接传回调函数：

<v-autocomplete
    :items="patients"
    :filter="customFilter"
    color="blue"
    v-model="selectedPatient"
    label="Select a patient to send report to"
    <!-- 自定义显示的姓名 -->
    :item-title="patient => `${patient.firstName} ${patient.lastName}`"
    <!-- 选中后返回的值，这里示例用患者的uid，你也可以根据需求改成其他字段 -->
    :item-value="patient => patient.uid"
></v-autocomplete>

• 如果你的患者数据里已经有拼接好的全名字段比如fullName，直接写字段名即可：

item-title="fullName"
item-value="uid"

如果需要selectedPatient直接绑定选中的完整患者对象，不需要单独指定item-value，只需额外添加return-object属性即可：

<v-autocomplete
    ...
    return-object
    :item-title="patient => `${patient.firstName} ${patient.lastName}`"
></v-autocomplete>

解决方法2：插槽自定义选项内容（适合需要显示更多信息的场景） #

如果除了姓名之外，还需要在下拉选项里显示患者邮箱、手机号等额外信息，可以用item插槽自定义渲染内容：

<v-autocomplete
    :items="patients"
    :filter="customFilter"
    color="blue"
    v-model="selectedPatient"
    label="Select a patient to send report to"
    return-object
>
    <template v-slot:item="{ item }">
        <v-list-item>
            <v-list-item-content>
                <v-list-item-title>{{ item.firstName }} {{ item.lastName }}</v-list-item-title>
                <v-list-item-subtitle>{{ item.email }}</v-list-item-subtitle>
            </v-list-item-content>
        </v-list-item>
    </template>
</v-autocomplete>

额外排查点 #

如果配置后还是显示空白，检查Firestore返回的患者数据结构，确认姓名字段的键名和你代码里写的完全一致（区分大小写）。

内容的提问来源于stack exchange，提问作者DrVernCarson