How to disply checkbox in Vuetify autocomplete menu with multiple option and item slot?

Question

How to disply checkbox in Vuetify autocomplete menu with multiple option and item slot? the reason i use item slot i want to add a tooltip on the item but the checkbox removed after this

        <v-autocomplete
          v-if="attribute.guiDataType === 'dropdown'"
          :ref="`${attribute.attribute}_ct`"
          :no-data-text="$t('filter.NoData')"
          :label="attribute.label"
          :items="attribute.concepts"
          :value="selected[attribute.attribute]"
          :return-object="false"
          item-value="id"
          item-color="secondary"
          class="mx-4"
          multiple
          clearable
          data-test="dropdown-filter"
          :disabled="filtersLoading"
          @change="selectItem($event, attribute.attribute)"
        >
          <template #item="{ item }">
            <shortened-text-with-tooltip :text="item.label" />
          </template>
<v-autocomplete>

Answer 1

When using the item slot, you have to add the checkbox yourself, passing the necessary data from slot props. Use the list-item components for proper formatting.

Have a look at the snippet for an example:

const ShortenedTextWithTooltip = {
  props: ['text', 'disabled', 'ripple', 'isSelected'],
  template: `
    <v-tooltip attach>
      <template v-slot:activator="{ on, attrs }" >
        <v-list-item v-on="on" v-bind="attrs">
          <v-list-item-action>
            <v-simple-checkbox
              v-on="$listeners"
              :disabled="disabled"
              :value="isSelected"
              :ripple="ripple"
            />
          </v-list-item-action>
          <v-list-item-content>
            {{text}}
          </v-list-item-content>
        </v-list-item>
      </template>
      <span>Tooltip for {{text}}</span>
    </v-tooltip>
  `
}

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  components: {
    ShortenedTextWithTooltip
  },
  template: `
    <v-app>
      <v-main>
        <v-container>
          Values: {{value}}
          <v-autocomplete
            no-data-text="$t('filter.NoData')"
            label="Concept"
            :items="concepts"
            v-model="value"
            item-value="id"
            item-text="label"
            item-color="secondary"
            class="mx-4"
            multiple
            clearable
          >
            <template #item="{ item, on, attrs: {disabled, inputValue, ripple} }">
              <shortened-text-with-tooltip
                :text="item.label"
                v-on="on"
                :disabled="disabled"
                :isSelected="inputValue"
                :ripple="ripple"
              />
            </template>
          </v-autocomplete>
        </v-container>
      </v-main>
    </v-app>
  `,
  data() {
    return {
      value: [],
      concepts: Array.from({
        length: 10
      }, (_, i) => ({
        id: i,
        label: 'Concept ' + i
      })),
    }
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

<div id="app"></div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>