Vue @click doesn't work on an anchor tag with href present

Question

EDIT: I forgot to clarify, what I'm looking for is to know how to write an anchor tag with the href attribute present but that when the element is clicked, the href should be ignored and the click handler should be executed.

I'm currently using Vue 1 and my code looks like:

<div v-if="!hasPage(category.code)">
  <div>
    <template v-for="subcategoryList in subcategoryLists[$index]" >
      <ul>
        <li v-for="subcategory in subcategoryList"v-on:click.stop="test()">
          <a :href="subcategory.url">{{subcategory.label}}</a>
        </li>
      </ul>
    </template>
  </div>
</div>

What i'm trying to do is present the user with some buttons that represent my site's categories, some of this buttons will lead the user to another page and other will toggle a dropdown with a list of subcategories, when clicking these subcategories you will be taken to the subcategory's page.

These would be pretty simple but these buttons need to be tracked by Google Tag Manager so that's why I used the @click attribute to call a function and ignore the href attribute. This doesn't work, I have tried @click.prevent, @click.stop, @click.stop.prevent and none of these work.

The thing is that if I remove the href attribute, the @click method works great but an SEO requirement is to have href attributes on every link.

Any help would be appreciated.

Lump

what if you put the click event on the anchor tag? – Seventieth

could you differentiate between the buttons that lead to another page and those that toggle dropdown list? – Cymose

@boussadjrabrahim I omitted the first buttons because the code was a bit long and is separate from this. I should've specified that the code i'm showing is only the parte in charge of the subcategory buttons, in my mind this should be pretty straight because this are simple anchor tags that need an href with a valid url but when clicked should trigger a function and not navigate. – Lump

@Lump please share a running code snippet in jsfiddle or codesandbox – Cymose

@DanOswalt Nothing happens in that case either, I've tried different places for the click handler but none seem to work unless I remove the href. – Lump

please share the whole template and your data object – Cymose

@boussadjrabrahim It's not necessary since I believe the code I shared is pretty self explanatory, the code is from work so i'm not allowed to share it. I was just hoping that I could get a recommendation on how to write an anchor tag with it's href attribute and a click handler properly. I don't care for a recommendation personalized for my code, just an example that works or an observation if I'm doing anything wrong. – Lump

so, give me a dummy example of the categories and subcategories – Cymose

Answer 1

As @dan-oswalt specified in the comments, you have to add the click event on the same element as the href. The reason it did not work the time you tried is most likely because you tried with @click.stop which only stops propagation, not the default action. (Redirect to the link). What you want is to prevent the browser to redirect the user: @click.prevent

new Vue({
  el: '#app',
  data: {
    subcategoryList: Array(10).fill({
        url: 'http://google.com',
        label: 'http://google.com'
    })
  },
  methods: {
    test(event) {
      event.target.style.color = "salmon"
    }
  }
})
Vue.config.devtools = false
Vue.config.productionTip = false

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<main id="app">
<template>
  <ul>
    <li v-for="subcategory in subcategoryList">
      <a :href="subcategory.url" v-on:click.prevent="test($event)">{{subcategory.label}}</a>
    </li>
 </ul>
</template>
</main>

Reinwald