Vuetify v-combobox中item-text与item-value使用及显示异常问题

云上老周

2026-7-3

解决方案

下拉选项显示[object Object]的核心原因是v-combobox未正确解析对象中的name字段来渲染选项文本，以下是两种可行的修复方案：

方案1：使用函数式`item-text`精准提取字段

将组件的item-text属性改为函数形式，确保组件能正确读取每个大学对象的名称：

<template>
  <v-combobox
    v-model="universityName"
    :items="universities"
    :item-text="item => item.name" <!-- 修改为函数形式 -->
    item-value="name"
    hide-details
    label="University Name"
    @update:modelValue="filterUniversities"
    :return-object="false"
  />
</template>

方案2：预处理API返回数据

在赋值给universities前，提前格式化数据，确保结构符合组件预期：

// 在filterUniversities方法中修改赋值逻辑
this.universities = response.data.map(university => ({
  name: university.name
  // 若需保留其他字段（如国家、域名）可在此添加
}));

优化后的完整代码

结合方案1，并补充空搜索时的列表清空逻辑，提升体验：

<template>
  <v-combobox
    v-model="universityName"
    :items="universities"
    :item-text="item => item.name"
    item-value="name"
    hide-details
    label="University Name"
    @update:modelValue="filterUniversities"
    :return-object="false"
  />
</template>

<script>
import axios from "axios";
import _ from 'lodash';

export default {
  data() {
    return {
      universityName: '',
      universities: [],
    }
  },
  methods: {
    filterUniversities: _.debounce(async function(search) {
      // 空搜索时清空下拉列表
      if (!search) {
        this.universities = [];
        return;
      }
      try {
        const response = await axios.get(`http://universities.hipolabs.com/search?name=${encodeURIComponent(search)}`);
        this.universities = response.data;
      } catch (error) {
        console.error('Error fetching universities:', error);
      }
    }, 500),
  }
}
</script>