Given Vue3 + Vuetify3 code:

<template>
  <v-autocomplete :items="items" :value="selectedItem">
    <template v-slot:item="data">
      <v-tooltip>
        <template v-slot:activator="{ props }">
          <v-list-item v-bind="props">
            {{ data.item.title }}
          </v-list-item>
        </template>
        <span>{{ data.item.raw.tooltip }}</span>
      </v-tooltip>
    </template>
  </v-autocomplete>
</template>
<script setup lang="ts">
import { ref } from "vue";

const selectedItem = ref(null);
const items = [
  { title: "Option 1", tooltip: "This is the first option" },
  { title: "Option 2", tooltip: "This is the second option" },
  { title: "Option 3", tooltip: "This is the third option" },
];
</script>

I'd like to have a unique tooltip for every item in my autocomplete model, but with the current code none of the items in the dropdown are clickable while the tooltips render correctly.

Given Vue3 + Vuetify3 code:

<template>
  <v-autocomplete :items="items" :value="selectedItem">
    <template v-slot:item="data">
      <v-tooltip>
        <template v-slot:activator="{ props }">
          <v-list-item v-bind="props">
            {{ data.item.title }}
          </v-list-item>
        </template>
        <span>{{ data.item.raw.tooltip }}</span>
      </v-tooltip>
    </template>
  </v-autocomplete>
</template>
<script setup lang="ts">
import { ref } from "vue";

const selectedItem = ref(null);
const items = [
  { title: "Option 1", tooltip: "This is the first option" },
  { title: "Option 2", tooltip: "This is the second option" },
  { title: "Option 3", tooltip: "This is the third option" },
];
</script>

I'd like to have a unique tooltip for every item in my autocomplete model, but with the current code none of the items in the dropdown are clickable while the tooltips render correctly.

• javascript
• vue.js
• vuejs3
• vue-component
• vuetify.js

1 Answer 1

The item slot exposes its own props object, which you need to bind to the VListItem as well (or at least props.onClick).

You can bind them both by renaming the props so they have unique names and then restructuring them into the v-bind:

      <v-autocomplete :items="items" v-model="selectedItem">
        <template v-slot:item="{item, props: itemProps}">
          <v-tooltip>
            <template v-slot:activator="{ props: tooltipProps }">
              <v-list-item
                v-bind="{...tooltipProps, ...itemProps}"
              ></v-list-item>
            </template>
            <span>{{ item.raw.tooltip }}</span>
          </v-tooltip>
        </template>
      </v-autocomplete>

Both props contain a ref, so if you bind them both, one ref will be overridden. I don't think that matters, but if you want to make sure, bind the props to different tags.

Here it is in a playground.