Vuetify 自动完成链接

Question

我想知道如何将 link 附加到 Vuetify 自动完成中的项目。我想这样做，以便它可以充当搜索栏。截至目前，我可以将 links 附加到 v-list-item，但 link 不会覆盖容器的整个宽度。它似乎只是在文本周围形成一个 link 而不是整个项目。我试图包装整个组件，但这似乎也不起作用。我也试过查看文档 (https://vuetifyjs.com/en/components/autocompletes/)，但我似乎也找不到有关制作项目 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>

Answer 1

项目槽应该是 <v-list-item/>，因为这些项目槽的包装元素默认情况下已经是 <v-list/>。

<v-autocomplete
...
>

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

</v-autocomplete>

这里是 demo。

Vuetify 自动完成链接

Vuetify Autocomplete Links

autocomplete

hyperlink

vue.js

nuxt.js

vuetify.js