Vue.js 将URL动态分配给vuejs卡

好的，我创建了一个网格，里面有我想要动态href的卡片，它正在工作，但是当点击页面上显示的任何卡片时，它给了我一个“未定义”的URL路径

我试过用

的方法，但它与

的方法冲突

任何帮助都将不胜感激

<template>
  <v-container>
    <v-row v-for="n in 1" :key="n" no-gutters class="pa-7">
      <v-col v-for="n in 6" :key="n" :cols="n === 1 ? 4 : 4">
        <v-hover v-slot:default="{ hover }">
   
    ## here I am trying to dynamically href the cards so that I can assign URLs outside of the website to them

          <a class="text-decoration-none" target="blank" :href="`${years.href}`">
            <v-card flat tile class="d-flex">
              <v-img
                :src="`https://picsum.photos/500/500?image=${n * 5 + 10}`"
                :lazy-src="`https://picsum.photos/10/6?image=${n * 5 + 10}`"
                class="grey lighten-5"
                :aspect-ratio="12/8.5"
              >
                <v-expand-transition>
                  <div
                    v-if="hover"
                    class="d-flex transition-fast-in-fast-out black darken-2 v-card--reveal display-3 white--text"
                    style="height: 100%;"
                  >View Card</div>
                </v-expand-transition>
                <template v-slot:placeholder>
                  <v-row class="fill-height ma-0" align="center" justify="center">
                    <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
                  </v-row>
                </template>
              </v-img>
            </v-card>
          </a>
        </v-hover>
      </v-col>
    </v-row>
  </v-container>
</template>


<script>
export default {
  data: () => ({
    years: [
      {
        href: "https://www.google.com",
        text: "me",
      },
      {
        text: "me",
        href: "https://www.bing.com",
      },

      {
        text: "twice",
        href: "https://www.facebook.com",
      },
    ],
  }),
};
</script>

<style>
.v-card--reveal {
  align-items: center;
  bottom: 0;
  justify-content: center;
  opacity: 0.5;
  position: absolute;
  width: 100%;
}
</style>

##在这里，我试图动态href的卡，以便我可以分配网址以外的网站给他们
导出默认值{
数据：（）=>({
年份：[
{
href:“https://www.google.com",
文字：“我”，
},
{
文字：“我”，
href:“https://www.bing.com",
},
{
文本：“两次”，
href:“https://www.facebook.com",
},
],
}),
};
.v-卡-显示{
对齐项目：居中；
底部：0；
证明内容：中心；
不透明度：0.5；
位置：绝对位置；
宽度：100%；
}

很抱歉，您将得到的是未定义。年份是一个数组，您正试图访问数组中该对象的href属性。因此，为了获得href属性，您需要使用v-for遍历数组以访问对象的那些属性。

抱歉，您将获得未定义的属性。年份是一个数组，您正试图访问数组中该对象的href属性。因此，为了获得href属性，您需要使用v-for遍历数组来访问对象的那些属性。

您试图访问

年
的href属性，这里：
:href=“years.href”
，这会给您
未定义的
，因为
年
是一个数组

此外，您还可以将数据正确地布局为：

年份：[
{
文字：“我”，
href:“https://www.google.com",
src:“https://picsum.photos/500/500?image=1",
懒散的：https://picsum.photos/10/6?image=1"
},
...
]

并在html上像这样使用它：



这是一个示例。
您试图在此处访问
年
的href属性：
:href=“years.href”
，它为您提供了未定义的
，因为
年
是一个数组

此外，您还可以将数据正确地布局为：

年份：[
{
文字：“我”，
href:“https://www.google.com",
src:“https://picsum.photos/500/500?image=1",
懒散的：https://picsum.photos/10/6?image=1"
},
...
]

并在html上像这样使用它：



这是一个样本