带链接的 Div 内的 VueJS 按钮也会触发 href 链接答案

【问题标题】：VueJS Button inside Div with Link also triggers href link带链接的 Div 内的 VueJS 按钮也会触发 href 链接
【发布时间】：2020-08-02 22:13:29
【问题描述】：

我的html

<a href="/someplace">      
  <div>
    <vuecomp></vuecomp>
    <span>Click row for more info</span>
  </div>
</a>

然后是 Vue 组件……

<template>
  <div @click.stop="doAction">
  </div>
</template>

当 doAction 被调用时，它也会从它的父 div 触发 <a href="">。我该如何阻止它这样做？我不希望父 div 成为组件的一部分，它只是一个表格视图。我试过@click.stop 并通过doAction(event) 和event.stopPropagation();

任何其他想法，使用 vuejs 在点击行上有一个按钮似乎很简单？

【问题讨论】：

为什么要将 div 和组件包裹在锚标签内？？
它是一个表格，包含更多信息，一行，可点击。

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

您想禁用默认行为。所以你需要.prevent

<template>
  <div @click.prevent="doAction">
  </div>
</template>

【讨论】：

【解决方案2】：

使用 prevent 修饰符为锚点上的点击事件添加一个空处理程序：

 <a href="/someplace" @click.prevent="">

let app = new Vue({
  el: "#app",

  data() {
    return {


    };
  },
  methods: {
    doAction() {

      console.log("do action")
    }
  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <a href="/someplace" @click.prevent="">
    <div>
      <div @click="doAction">
      do action
      </div>
      <span>Click row for more info</span>
    </div>
  </a>

</div>

【讨论】：

【解决方案3】：

您要做的是将父级<a> 标记转换为普通的<div> 并使用.self 修饰符为其附加一个事件。这样，只有当您单击父 div 本身时才会处理单击，而不是当您单击其中的任何子元素时。

<div href="/someplace" @click.self="yourEventToOpenTheRow">      
  <div>
    <vuecomp></vuecomp>
    <span>Click row for more info</span>
  </div>
</div>

【讨论】：