带有链接的 VueJs Vuetify 自动完成答案

【问题标题】：VueJs Vuetify Autocomplete with links带有链接的 VueJs Vuetify 自动完成
【发布时间】：2020-12-12 22:49:45
【问题描述】：

我正在使用 vuetify，我希望像他们官方网站上的那样自动完成。但我面临一些问题：项目值未出现在退货列表中，我不知道如何显示链接。这是我的代码。谢谢你

<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>

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

我解决了您的问题并尝试制作一个 codepen，它成功了。我的建议是，当您使用具有自动完成功能的对象时，您应该考虑数据结构，即使您使用 v-select 也需要它。请检查这支笔。 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/'
},

【讨论】：