Vue.js Vue @click 不适用于存在 href 的anchor锚标记

发布于10月20日

编辑:我忘了澄清一下，我想知道如何编写带有href属性的锚定标记，但是当元素被单击时，应该忽略href并执行click处理程序.

我目前正在使用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>

我要做的是给用户展示一些代表我网站类别的按钮，其中一些按钮将 bootstrap 用户进入另一个页面，另一些按钮将切换带有子类别列表的下拉列表，当单击这些子类别时，您将被带到子类别的页面.

这些按钮非常简单，但谷歌标签管理器需要跟踪这些按钮，所以我使用@click属性调用函数，而忽略href属性.这不管用，我试过@click.阻止，@点击.停下，咔嗒.停止这些都不起作用.

问题是，如果我删除href属性，@click方法效果很好，但SEO要求在每个链接上都有href属性.

任何帮助都将不胜感激.

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>

Vue.js Vue @click 不适用于存在 href 的anchor锚标记

推荐答案

Vue.js相关问答推荐

具有VUE身份验证的Azure AD

用于循环数组的模板元素内的条件渲染

可组合数据获取示例

将 v-calendar 与以时间和日期格式出现的事件一起使用

Vuejs 和 Laravel 发布请求 CORS

如何使用 vue 或 javascript 向服务器发送密码？

在按键 vuejs 中只允许数字和一个小数点后 2 位限制

在 SASS 中使用 Vuetify 类

如何在 vue 3 脚本设置中的组件上使用 v-model

VueJS 使用 prop 作为数据属性值

Laravel 事件未广播

Vue router路由，Root Vue 没有数据？

基于媒体查询的vue绑定值

如何将事件绑定到 Vuetify 中的树视图 node ？

Import Unexpected identifier + SyntaxError： Unexpected string

Vue在按钮单击时添加一个组件

如何在 Vue.js 插槽范围内传递方法

Vuetify - 如何进行分页？

如何在 Vuetify DataTable 组件中设置初始每页行数值？

将它们分开时将 Django 的 csrf_token 放入 Vuejs