You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

USelectMenu设置默认值时显示ID而非标签的问题求助

USelectMenu设置默认值时显示ID而非标签的问题求助

我现在在尝试给USelectMenu组件填充选项并设置默认值,但遇到了一个头疼的问题——控件显示的是ID字符串而不是对应的标签名称。我已经把原始数据转换成了{ label, value }的格式,默认值也指向了目标公司的ID,但就是不显示标签。以下是我的完整代码,麻烦帮忙看看哪里出问题了:

<template>
  <div class="p-8">
    <h1 class="text-2xl font-bold mb-4"> Test Page </h1>
    <p class="mb-2"> This is a minimal Vue page. </p>
    <div>
      <div>{{ companyOptionsTest }}</div>
      <USelectMenu v-model="selectedCompanyTest" :items="companyOptionsTest" placeholder="Select a company" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';

let testCompanies = [
  {
    "id": "458d7c38-7d9c-4641-9d18-9409b1d04377",
    "name": "Test1",
    "type": "",
    "country": "",
    "contacts": [
      {
        "id": "5ddb52dc-47cd-49d6-9953-d4ca88319a5a",
        "firstName": "Eric",
        "lastName": "Yang",
        "salutation": "Mr",
        "email": "",
        "phoneNumber": ""
      },
      {
        "id": "0750316f-3428-417e-a226-15886b1731ce",
        "firstName": "Erik",
        "lastName": "Lee",
        "salutation": "",
        "email": "",
        "phoneNumber": ""
      },
      {
        "id": "cabcd68d-0a6e-41d8-bcf4-a5772d7c5b57",
        "firstName": "mmkk",
        "lastName": "k",
        "salutation": "",
        "email": "k",
        "phoneNumber": "k"
      }
    ]
  },
  {
    "id": "5ef5cabf-ac5c-4639-a04b-617ac17e8906",
    "name": "Test2",
    "type": "",
    "country": "",
    "contacts": [
      {
        "id": "8afd7173-046a-426e-824c-f2c1bacf3778",
        "firstName": "Roberto",
        "lastName": "Tester",
        "salutation": "",
        "email": "",
        "phoneNumber": ""
      },
      {
        "id": "090f5fed-2466-41fc-abae-ef935bf6f96e",
        "firstName": "Tester",
        "lastName": "Kjo",
        "salutation": "",
        "email": "",
        "phoneNumber": ""
      }
    ]
  },
  {
    "id": "a7403568-1dcf-40d5-b611-58defaba75fc",
    "name": "Bernard Test3",
    "type": "",
    "country": "",
    "contacts": [
      {
        "id": "216b37fc-ee90-41a8-8edb-9430d9389fdd",
        "firstName": "James",
        "lastName": "",
        "salutation": "",
        "email": "",
        "phoneNumber": ""
      },
      {
        "id": "c3dc77fc-ad81-4d27-8df1-d13a557d3974",
        "firstName": "Q",
        "lastName": "LOL",
        "salutation": "",
        "email": "",
        "phoneNumber": ""
      },
      {
        "id": "5a35be30-396a-4f98-8792-fcaa92352960",
        "firstName": "dfsfsd",
        "lastName": "asdasdas",
        "salutation": "",
        "email": "",
        "phoneNumber": ""
      }
    ]
  },
  {
    "id": "2ba1ce4c-00e5-4476-a245-25e0cfd3fdbc",
    "name": "Besiktas",
    "type": "",
    "country": "",
    "contacts": [
      {
        "id": "ac728279-59fc-4ab3-a001-45cd652b9723",
        "firstName": "A Adam",
        "lastName": "Bro",
        "salutation": "dssdffsf11",
        "email": "sadasdas11",
        "phoneNumber": "virker2"
      },
      {
        "id": "551e4bca-ad31-471a-a940-d7eb417cd487",
        "firstName": "Omer",
        "lastName": "",
        "salutation": "",
        "email": "",
        "phoneNumber": ""
      }
    ]
  },
  {
    "id": "3a406785-9f2b-41f0-99a1-cb6f8605f504",
    "name": "Bihar",
    "type": "",
    "country": "",
    "contacts": [
      {
        "id": "4b72120f-70c4-445c-98d7-d6dcfe440635",
        "firstName": "Stella",
        "lastName": "TEST",
        "salutation": "",
        "email": "",
        "phoneNumber": ""
      }
    ]
  }
];

const companyOptionsTest = testCompanies.map(company => ({ label: company.name, value: company.id }));

// Set default to Bihar's id
const selectedCompanyTest = ref(
  testCompanies.find(c => c.name === 'Bihar')?.id || null
);
</script>
<style scoped>
/* You can add page-specific styles here */
</style>

我检查过companyOptionsTest的数据格式是对的,默认值也确实是存在的ID,但USelectMenu就是直接显示ID文本。有没有大佬能指点一下问题所在?

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.07 06:18:39