When a VueJS button is located within a div that also contains a link, clicking on

Question

When a VueJS button is located within a div that also contains a link, clicking on

Can someone help me with my HTML issue?

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

Following is the Vue component I am working on...

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

When doAction is called, it also triggers the <a href=""> from its parent div. How can I prevent this behavior? I want the parent div to remain separate from the component as it is just a table view. I have tried using @click.stop and passing doAction(event) with event.stopPropagation();, but it doesn't seem to work.

Does anyone have any other suggestions? It seems like a simple thing to have a button on a click row in Vue.js.

javascript vue.js vuejs2 vue-component

Answer 1

Answer №1

To prevent the default action on a click event for an anchor tag, add an empty handler with the 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>

Answer 2

To prevent the default action on a click event for an anchor tag, add an empty handler with the 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>

Answer 3

Answer №2

If you wish to override the default functionality, make use of .prevent

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

Answer 4

If you wish to override the default functionality, make use of .prevent

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

Answer 5

Answer №3

To achieve the desired outcome, simply transform the parent <a> tag into a basic <div> and set up an event listener on it using the .self modifier. This ensures that the click event will only be triggered when you specifically click on the parent div, rather than any of its child elements.

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

Answer 6

To achieve the desired outcome, simply transform the parent <a> tag into a basic <div> and set up an event listener on it using the .self modifier. This ensures that the click event will only be triggered when you specifically click on the parent div, rather than any of its child elements.

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

When a VueJS button is located within a div that also contains a link, clicking on

Answer №1

Answer №2

Answer №3

Similar questions

Prompt for confirmation in ASP.NET code-behind with conditions

Does React JS set initial value after re-rendering its state?

Node.js: The Ultimate Solution for Automatic Data Saving

The response to ajax requests does not appear in Chrome Dev Tools

What is the best way to update my lowdb database directly from the frontend in a next.js application?

Unfortunately, the header and footer are not lining up correctly with the main body on our mobile site

Resolving peer dependency conflict during npm installation

Access the JSON data stored in the File Directory by reading and utilizing it for your project

Display items in a not predetermined order

When React first fetches data and users move to chat with each other, the state value does not update

Can you achieve a click event in Vue without using $refs?

The transformation of a Blender model in THREE.js results in a completely new and distinct

Complete loading of iframe content on Internet Explorer versions 8 and 9

What is the process for creating a React Component with partially applied props?

Generating observables from form submission event

Determine the status of all jqXHR requests within an array to confirm completion

Guide to obtaining context vnode within vue 3 custom directives

Using Javascript to Showcase a Video's Number of Views with Brightcove

The router should display a component based on the user's access level, even if they are

Include a Vue component within another Vue component in a Laravel application using VueJs