vuejs3 - Add an image in the checkbox label on an autocomplete - Stack Overflow

admin管理员组

文章数量:1205576

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

Share Improve this question Follow asked Jan 20 at 10:09 FaroFaro 1111 silver badge11 bronze badge 2

• 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

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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

本文标签： vuejs3Add an image in the checkbox label on an autocompleteStack Overflow