Vue @click не работает с тегом привязки при наличии href

Question

РЕДАКТИРОВАТЬ: я забыл уточнить, что я ищу, чтобы знать, как написать тег привязки с атрибутом href, но когда элемент щелкается, href следует игнорировать и обработчик нажатия должен быть выполнен.

В настоящее время я использую Vue 1, и мой код выглядит следующим образом:

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

Я пытаюсь представить пользователю несколько кнопок, которые представляют категории моего сайта, некоторыеЭти кнопки приведут пользователя к другой странице, а другие переключат выпадающий список со списком подкатегорий. При нажатии на эти подкатегории вы попадете на страницу подкатегории.

Это было бы довольно просто, но эти кнопки нуждаются вчтобы меня отслеживал менеджер тегов Google, поэтому я использовал атрибут @click для вызова функции и игнорировал атрибут href.Это не работает, я пробовал @ click.prevent, @ click.stop, @ click.stop.prevent и ничего из этого не работает.

Дело в том, что если я удалю атрибут href, то @Метод click работает отлично, но для SEO требуется наличие атрибутов href для каждой ссылки.

Любая помощь будет признательна.

Answer 1

В качестве @ dan-oswalt, указанного в комментариях, необходимо добавить событие щелчка в тот же элемент, что и href .Причина, по которой это не сработало, когда вы пробовали, скорее всего, потому что вы пробовали с @click.stop, который только останавливает распространение, а не действие по умолчанию.(Перенаправить на ссылку).Вы хотите, чтобы браузер не перенаправлял пользователя: @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/vue@2.5.17/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>