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

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

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

Solution

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/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

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

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>