vue.js - Vuetify 自动完成链接

Question

我想知道如何将链接附加到 Vuetify 自动完成中的项目。我想这样做，以便它可以充当搜索栏。截至目前，我可以将链接附加到 v-list-item 但该链接不会覆盖容器的整个宽度。它似乎只是围绕文本而不是整个项目形成一个链接。我试图包装整个组件，但这似乎也不起作用。我也试过查看文档( https://vuetifyjs.com/en/components/autocompletes/ )，但我似乎也找不到关于在那里制作项目链接的任何内容。提前感谢您的任何帮助。

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