VueJS Button inside Div with Link also triggers href link

Question

My html

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

Then Vue component as such...

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

When doAction is called it ALSO triggers the <a href=""> from it's parent div. How do I stop it from doing this? I don't want the parent div to become part of the component, it's just a table view. I've tried @click.stop and passing doAction(event) with event.stopPropagation();

Any other ideas, seems like a simple thing to have a button on a click row using vuejs?

why do you wrap and div and component inside an anchor tag?? — Ilijanovic
– Ilijanovic, Commented Apr 20, 2020 at 11:59
Its a table, with more information, a row, that is clickable. — Matt The Ninja
– Matt The Ninja, Commented Apr 20, 2020 at 12:00

Boussadjra Brahim · Accepted Answer · 2020-04-20 12:16:38Z

2

Add an empty handler to the click event on the anchor with prevent modifier :

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

answered Apr 20, 2020 at 12:16

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-16 00:19:28Z

1

You want to disable the default behaviour. So you need .prevent

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

edited Jul 16, 2022 at 0:19

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Apr 20, 2020 at 12:16

Radu Diță

14.3k2 gold badges33 silver badges37 bronze badges

Comments

Steve S. · Accepted Answer · 2020-04-20 12:49:25Z

0

What you want to do is turn the parent <a> tag into a plain <div> and attach an event to it, using the .self modifier. That way the click will be handled only when you've clicked onto the parent div itself, and not when you've clicked on any of the child elements inside of it.

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

answered Apr 20, 2020 at 12:49

Steve S.

11 silver badge

Collectives™ on Stack Overflow

VueJS Button inside Div with Link also triggers href link

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related