Question

我正在使用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>

Answer 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/'
},

VueJs Vuetify自动完成链接

1 个答案: