Tengo una pieza de navegación de la interfaz de usuario que se compone de pestañas y paneles de arranque 3 (sí, sé que es terriblemente antiguo) y Vue 2.

Dentro de una de las pestañas (que es un enlace en su totalidad), necesito colocar un SVG con un evento de clic que activará una acción en Vuex. Pero debido a que el SVG está dentro de un ancla, también necesito detener el clic de la pestaña para que no lleve al usuario a esa pestaña.

Mi pestaña se ve así: (ruta svg abreviada por brevedad)

 <a href="#programs" data-toggle="tab" @click="select(1, $event)" id="link-programs"> <strong>Programs</strong> <div class="pull-right"> <svg @click.prevent="runPrograms" class="program-indicator" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="removed for brevity"></path> </svg> </div> </a>

Mi primer pensamiento fue buscar y encontrar la etiqueta de anclaje y preventDefault() pero obviamente eso no funcionó ya que no es el evento al que se llama.

 runPrograms(event) { let anchor = event.target.parentElement.parentElement anchor.preventDefault() // do stuff }

¿Cómo puedo evitar que se ejecute el clic de la pestaña, pero solo cuando se ha hecho clic en el SVG real?