如何在 nuxt-link 中添加 href？

Question

我有很多这样的卡片

<nuxt-link :to="{ name: 'portfolio-slug', params: { slug: card.slug } }">
  <a :href="card.link>Go to href</a>
</nuxt-link>

单击带有 nuxt-link 的卡片应该会打开包含卡片详细信息的页面

单击 href 应打开外部站点

但是当我点击 a-href 它的开放细节并忽略 a-href

尝试为 nuxt-link 使用一些标签但没有帮助

原文由 Remi Fokz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您在 <a> 中单击 <a> （这正是 <nuxt-link> 生成的内容），您实际上是在向两个元素发送点击事件。这不是好的做法（甚至用 js 停止传播）。只是不要嵌套它

如果它必须位于“卡片”之上，也许可以使用 css 对其进行绝对定位。

尝试类似的东西：

 <div class="card">
  <nuxt-link  :to="{ name: 'portfolio-slug', params: { slug: card.slug } }">
    {{ card.content }}
  </nuxt-link>
  <a class="card__cta" :href="card.link>Go to href</a>
</div>

和

.card {
  position: relative;
}

.card__cta {
  position: absolute;
  bottom: 24px; // depending where you need it, maybe you need top property
  right: 24px; // depending where you need it, maybe you need left property
}

原文由 Toni Michel Caubet 发布，翻译遵循 CC BY-SA 4.0 许可协议