VueJs Vuetify Autocomplete with links

Question

I'am using vuetify and i want make auto complete like the one on their official site. But i'm faces some issues : The items value not appear in the return list and i don't know how to make appear the links. Here is my code. Thanks You

<template>
<v-app>
    <v-app-bar app color="primary" dark>
    
    <v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>
        <v-toolbar-title> Board </v-toolbar-title>
        <v-spacer></v-spacer>            
        <v-autocomplete 
            :loading="loading" 
            :filter="v => v" 
            :items="items" 
            :search-input.sync="search" 
            v-model="select" 
            flat hide-no-data hide-details return-object placeholder="Search ...">
        <v-list-tile
            slot="prepend-item"
            class="grey--text">
            {{ items.length }} menus found
        </v-list-tile>
        <template slot="selection" slot-scope="{ item }">
            {{item.name}} {{item.url}}
        </template>
        <template slot="item" slot-scope="{ item }">
            <v-list-tile-content>
                <p class='fullName'>{{item.name}} {{item.url}}</p>
            </v-list-tile-content>
        </template>
        </v-autocomplete>

    </v-app-bar>

    <v-main>
        <HelloWorld/>
    </v-main>
</v-app>

endmaster0809 endmaster0809 · Accepted Answer · 2020-08-24T11:28:35

I went through your issue and try to make a codepen and it worked. My suggestion is that you should consider data structure when you use object with auto complete and it 's needed even you use v-select. Please check this pen. https://codepen.io/endmaster0809/pen/qBZRywZ

items: [
  {
    name: 'Alerts',
    url: 'https://vuetifyjs.com/en/components/alerts/'
  },
  {
    name: 'Autocompletes',
    url: 'https://vuetifyjs.com/en/components/autocompletes/#autocompletes'
  }
],
select: {
    name: 'Alerts',
    url: 'https://vuetifyjs.com/en/components/alerts/'
},

VueJs Vuetify Autocomplete with links

1 Answers