javascripthtmlvuejs3vuetify.js

Create slots for v-combobox vuetify

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:

enter image description here

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 ?

Solution

  • 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