Vuetify / vuejs ссылки не работают в списке элементов

Question

Я передал следующие данные через опору компоненту, содержащему компонент элемента v-list. У меня отображается список вместе с текстом ссылки, но по какой-то причине ссылки на самом деле не работают по какой-то причине. Что я сделал не так?

Данные:

data() {
    return {
      categories: [
        {
          src: 'https://picsum.photos/200',
          title: 'Pic 1',
          links: [
            { text: 'GOOGLE', url: 'https://www.google.co.uk/' },
            { text: 'Link 2', url: '#' },
            { text: 'Link 3', url: '#' },
            { text: 'Link 4', url: '#' }
          ]
        }
      ]
    };
  }

Компонент:

<template>
  <v-row>
    <v-col cols="6" md="3" v-for="p in picture" :key="p.id">
      <v-hover v-slot:default="{ hover }">
        <v-img :src="p.src">
          <v-expand-transition>
            <div
              v-if="hover"
              class="transition-fast-in-fast-out red darken-2 v-card--reveal white--text text-center"
              style="height: 100%;"
            >
              <v-list-item-group>
                <v-list-item v-for="link in p.links" :key="link.id">
                  <v-list-item-content>
                    <v-list-item-title :to="link.url">{{
                      link.text
                    }}</v-list-item-title>
                  </v-list-item-content>
                </v-list-item>
              </v-list-item-group>
            </div>
          </v-expand-transition>
        </v-img>
      </v-hover>
    </v-col>
  </v-row>
</template>

Answer 1

В этом : to prop относится к объявлению компонента маршрута, а не к внешним URL-адресам.

Для перенаправления на внешний URL-адрес вы можете использовать что-то вроде ниже.

<v-list-item :href="link.url" target="_blank">{{link.text}}</v-list-item>