I have a form with a that allows the user to select up to 2 options. I want to customize the options that are displayed in the dropdown menu. This is my code now:

    <v-autocomplete
      :items="filteredItems"
      v-model="selectedItems"
      item-title="name"
      chips
      multiple
      return-object
      closable-chips
    >
      <template v-slot:chip="{ props, item }">
        <v-chip
          v-bind="props"
          :prepend-avatar="item.raw.image"
          :title="item.raw.name"
        ></v-chip>
      </template>

      <template v-slot:default="{ item }">
          <v-checkbox>
            <template v-slot:label>
              <v-avatar size="20">
                <img
                  :src="item.raw.image"
                  alt="item.name"
                  width="20"
              /></v-avatar>
            </template>
          </v-checkbox>
      </template>

    </v-autocomplete>

I want to display a checkbox for each option, along with an image and a label. However, the image is not displaying correctly in my current code. The checkbox status must be synchronized with the selected options. I've tried a lot of things but I can't make both work (the checkbox and the image).

I have a form with a that allows the user to select up to 2 options. I want to customize the options that are displayed in the dropdown menu. This is my code now:

    <v-autocomplete
      :items="filteredItems"
      v-model="selectedItems"
      item-title="name"
      chips
      multiple
      return-object
      closable-chips
    >
      <template v-slot:chip="{ props, item }">
        <v-chip
          v-bind="props"
          :prepend-avatar="item.raw.image"
          :title="item.raw.name"
        ></v-chip>
      </template>

      <template v-slot:default="{ item }">
          <v-checkbox>
            <template v-slot:label>
              <v-avatar size="20">
                <img
                  :src="item.raw.image"
                  alt="item.name"
                  width="20"
              /></v-avatar>
            </template>
          </v-checkbox>
      </template>

    </v-autocomplete>

I want to display a checkbox for each option, along with an image and a label. However, the image is not displaying correctly in my current code. The checkbox status must be synchronized with the selected options. I've tried a lot of things but I can't make both work (the checkbox and the image).

• vuejs3
• vuetify.js

• What is not working precisely? Do you have an error or something in the DOM that could help us narrow down the issue? – kissu Commented Jan 20 at 10:09
• No errors, but the image do not appear in the dropdown menu. The one in the chip works just fine, but in the dropdown there is just the checkbox and the default label text. – Faro Commented Jan 20 at 10:31

1 Answer 1

VAutocomplete does not have a default slot, you are looking for the item slot.

According to the docs, the item slot fills a v-list, so the first child should be a v-list-item.

This gives you something like this:

<v-autocomplete ...>
  <template v-slot:item="{ item, props }">

    <v-list-item v-bind="props">
      <template #prepend>

        <v-checkbox hide-details>
          <template v-slot:label>
            <v-avatar size="20">
              <img :src="item.raw.image" alt="item.name" width="20"/>
            </v-avatar>
          </template>
        </v-checkbox>

      </template>
    </v-list-item>

  </template>
</v-autocomplete>

To get the checked state to work, you can just check the list of selected items:

<v-checkbox
  :model-value="selectedItems.some(i => i.name === item.raw.name )"
>

The click event itself is handled by the list item. You could bind the onClick from the slot props to the checkbox, but I think this will not work as expected.

Here it is in a playground