I'm working with the following HTML template...
<template>
<li class="nav-item" style="z-index:9">
<router-link
:to="link.path"
@click.native="linkClick"
class="nav-link"
:target="link.target"
:href="link.path" >
<template >
<i :class="link.icon"></i>
<div>
<div class="navLink" style="border:2px solid green; z-index:9; float: left;">
<span class="nav-link-text">{{ link.name }}</span>
<br>
<span style="font-size:12px" class="nav-link-text">{{ link.desc }}</span>
</div>
<div v-on:click.once="downloadDicom(link)" class="iconClick" style=" float:right;"> <i style="margin-top: 25px" class="fas fa-download"> </i>
</div>
</div>
</template>
</router-link>
</li>
</template>
My goal is to ensure that only the downloadDicom function is executed when clicking the link, without triggering the router link as well.
I've attempted various methods of event stopping but have been unsuccessful so far.
downloadDicom() {
event.stopImmediatePropagation();
event.stopPropagation();
},