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.

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.

• javascript
• html
• vue.js
• seo

• 2 what if you put the click event on the anchor tag? – Dan Oswalt Commented Oct 19, 2018 at 22:31
• could you differentiate between the buttons that lead to another page and those that toggle dropdown list? – Boussadjra Brahim Commented Oct 19, 2018 at 22:38
• @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. – RichyST Commented Oct 19, 2018 at 22:42
• @RichyST please share a running code snippet in jsfiddle or codesandbox – Boussadjra Brahim Commented Oct 19, 2018 at 22:44
• @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. – RichyST Commented Oct 19, 2018 at 22:45

1 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>