Как добавить ссылку внутри ссылки Nuxt?

Question

У меня есть ряд таких карт

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

нажмите на карточку с nuxt-ссылкой, чтобы открыть страницу с информацией о карточке

нажмите на ссылку, чтобы открыть внешний сайт

но когда я нажимаю на a-href, то открываем детали и игнорирую a-href

пытался использовать некоторые теги для nuxt-ссылки, но не помогло

Answer 1

Если вы щелкнете по этому <a> внутри <a> (это именно то, что генерирует <nuxt-link>), вы фактически отправите событие click обоим элементам.Это нехорошая практика (даже прекращение распространения с помощью js).просто не вкладывайте его

Возможно, поместите его в абсолютное положение с помощью css, если оно должно быть сверху "карты".

Попробуйте что-то вроде:

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

и

.card {
  position: relative;
}

.goToHref {
  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
}