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文本。有没有大佬能指点一下问题所在?
相关产品推荐
相关产品推荐

