Vuetify Autocomplete Links

user_12957342 0
Viewed 1055

I am wondering how I can attach links to items within a Vuetify autocomplete. I would like to do this so that it would act as a search bar. As of right now, I can attach links to the v-list-item but the link won't cover the entire width of the container. It appears to just form a link around the text instead of the entire item. I've tried to wrap the entire component but that doesn't seem to work either. I've also tried looking at the docs (https://vuetifyjs.com/en/components/autocompletes/) but I can't seem to find anything on making items links there either. Thanks for any help in advance.

Picture of autocomplete link

      <v-autocomplete
        v-model="model"
        :items="users"
        :loading="isLoading"
        :search-input.sync="search"
        clearable
        hide-details
        hide-selected
        item-text="username"
        item-value="symbol"
        placeholder="Search"
        flat
        solo
        dense
      >
        <template v-slot:item="{ item }">
          <v-list>
            <v-list-item-group v-model="item">
              <v-list-item-content>
                <v-list-item link :to="'users/' + item.id">
                  {{item.username}}
                </v-list-item>
              </v-list-item-content>
            </v-list-item-group>
          </v-list>
        </template>
      </v-autocomplete>
nuxt.js vuetify.js vue.js autocomplete hyperlink
1 Answers

The item slot should be <v-list-item/> only since the wrapping element of those item slots are <v-list/> already by default.

<v-autocomplete
...
>

  <template v-slot:item="{ item }">
    <v-list-item link :to="'users/' + item.id">{{item.username}}</v-list-item>
  </template>

</v-autocomplete>

enter image description here

Here's a demo.

user_91834050
Related