I have a component that I want to create a slot for v-combobox because I want to show the dropdown items as a custom style section ,
<v-combobox
v-model="select"
v-model:search="search"
:items='companyList'
item-title='company_name'
item-value='id'
density="compact"
label="start chat with related companies"
variant="outlined"
bg-color='navbar'
hide-details
single-line
@input="startConversation"
>
<template #item="{ index, props, item }">
<v-list-item v-bind="props" :key="index" @click="createRoom(item)">
<div class='flex flex-col gap-y-1'>
<!-- Company Name -->
<span>{{ item.company_name }}</span>
<!-- Staff Names (Name and Last Name) -->
<div v-if="item.staff && item.staff.length">
<span v-for="(staffMember, i) in item.staff" :key="i">
{{ staffMember.name }} {{ staffMember.last_name }}
</span>
</div>
<!-- Fallback if no staff -->
<div v-else>
<span>No staff available</span>
</div>
</div>
</v-list-item>
</template>
</v-combobox>
I want to show slots as a custom template in dropdown when I'm searching in v-combobox, My data is like :
[
{
"id": 2,
"company_name": "company name",
"staff": [
{
"id": 1,
"name": "name1",
"last_name": "lastname1",
"email": "test@gmail.com",
"avatar": "https://test.com",
"position": "ceo",
"languages": [],
"phone_number": ""
},
{
"id": 2,
"name": "name2",
"last_name": "lastname2",
"email": "test@gmail.com",
"avatar": "https://test.com",
"position": "ceo",
"languages": [],
"phone_number": ""
},
{
"id": 3,
"name": "name3",
"last_name": "lastname3",
"email": "test@gmail.com",
"avatar": "https://test.com",
"position": "ceo",
"languages": [],
"phone_number": ""
}
],
"logo": "logo address"
}
]
How can I show a slot for each one of this company name in dropdown like this?
imagine this in dropdown:
company name is similar for each lane and also the avatar but the staff name and last name should be different under each line , I used my code and I just see the company name only how can I render the staff names and last names too ?
after a lots of time working with data I finally found it :
<v-combobox
v-model="select"
v-model:search="search"
:items="combinedCompanyStaffList"
item-title="displayText"
item-value="staffId"
density="compact"
label="Start chat withs"
variant="outlined"
bg-color="navbar"
hide-details
single-line
@input="startConversation"
>
<template #item="{ index, props, item }">
<v-list-item v-bind="props" :key="index" @click="createRoom(item)">
<div class='flex flex-col gap-y-1'>
<!-- Staff Name -->
<span class='text-sm text-gray-100'>{{ item.staffName }}</span>
<!-- Company Name -->
<span class='text-sm text-gray-100'>{{ item.companyName }}</span>
</div>
</v-list-item>
</template>
</v-combobox>
And I made a data as a computed property and changed the shape of data :
const combinedCompanyStaffList = computed(() => {
return companyList.value.flatMap(company =>
company.staff.map(staffMember => ({
staffId: staffMember.id, // Unique staff ID
staffName: `${staffMember.name} ${staffMember.last_name}`, // Full staff name
companyName: company.company_name, // Company name
displayText: `${staffMember.name} ${staffMember.last_name} - ${company.company_name}`, // Text to display in combobox
logo: company.logo
}))
);
});
No I have the data to make my custom slot in v-combobox