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 ?
You need to sign in to view this answers
Leave feedback about this