I have this component:
<template>
<div id="news" class="news page">
<router-link class="news-card" :to="{ name: 'news-article'}">
<a :href="'https://www.facebook.com'">www.facebook.com</a>
</router-link>
</div>
</template>
and I want to make the anchor tag clickable so that it opens the URL https://www.facebook.com.
I've tried lifting it in priority with z-index but it doesn't seem to work:
<style scoped lang="scss">
.news {
.news-card {
position: relative;
z-index: 1;
a {
position: relative;
z-index: 2;
&:hover {
color: red;
}
}
}
}
</style>
The hover effect on the anchor works, but not the href property. Any idea how to do that?
router-link is basically a a tag, so you basically have an a tag inside of an a tag. I assume when clicking on www.facebook.com it would take you to { name: 'news-article' } instead of facebook.
This is what you wanna do I guess..
<template>
<div id="news" class="news page">
<router-link class="news-card" to="https://www.facebook.com">
www.facebook.com
</router-link>
</div>
</template>