how add a href inside nuxt-link? - vue.js

Question

I have array of cards like this
<nuxt-link :to="{ name: 'portfolio-slug', params: { slug: card.slug } }">
<a :href="card.link>Go to href</a>
</nuxt-link>
click on card with nuxt-link should opening page with details of card
click on a href should open external site
but when i clicking on a-href its open details and ignoring a-href
tried use some tags for nuxt-link but not helped

Answer 1

If you click that <a> inside an <a> (it's just what <nuxt-link> generates) you are actually sending the click event to both elements. That it's not good practice (even stopping the propagation with js). just don't nest it
Perhaps absolute position it with css if it has to be on top of the "card".
Try something like:
<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>
and
.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
}

Answer 2

This seems to work for me at this moment
In Parent component
<template>
<ul
v-if="loadedTertiaryMenu"
class="nav justify-content-end"
>
<li
v-for="item in loadedTertiaryMenu"
:key="item.id"
class="nav-item"
>
<NavLink
:attributes="item"
/>
</li>
</ul>
</template>
<script>
import NavLink from '#/components/Navigation/NavLink'
export default {
name: 'TheNavigationTertiary',
computed: {
loadedTertiaryMenu() {
return this.$store.getters.loadedTertiaryMenu
}
},
components: {
NavLink
}
}
</script>
<style scoped lang="scss">
</style>
in Child component
<template>
<component
v-bind="linkProps(attributes.path)"
:is="NavLink"
:title="attributes.title"
:class="[ attributes.cssClasses ]"
class="nav-link active"
aria-current="page"
>
{{ attributes.label }}
</component>
</template>
<script>
export default {
name: 'NavLink',
props: {
attributes: {
type: Object,
required: true
}
},
methods: {
linkProps (path) {
if (path.match(/^(http(s)?|ftp):\/\//) || path.target === '_blank') {
return {
is: 'a',
href: path,
target: '_blank',
rel: 'noopener'
}
}
return {
is: 'nuxt-link',
to: path
}
}
}
}
</script>
<style scoped lang="scss">
</style>

Answer 3

It is an extension to #ArlanT answer
It adds the <slot/> so you can use it externally as follows.
<hyper-link class="anyClass" :url="myCustomUrl" #click.native="">Here lies my html</hyper-link>
<template>
<component
v-bind="linkProps(url)"
:is="'hyperLink'"
>
<slot/>
</component>
</template>
<script>
export default {
props:['url'],
name:'hyperLink',
methods: {
linkProps (path) {
if (path.match(/^(http(s)?|ftp):\/\//) || path.target === '_blank') {
return {
is: 'a',
href: path,
target: '_blank',
rel: 'noopener'
}
}
return {
is: 'nuxt-link',
to: path
}
}
}
};
</script>
<style>
</style>

Answer 4

<a :href="card.url" target="_blank">{{ card.title }}</a>