VueJS - Prevent Default on link click but also capture object

Question

I am learning Vue.JS and have run into a bit of a problem. I want the user to be able to click on an <a href="#"></a> tag, e.preventDefault(), and also grab the object associated with the link. Here is my code (note that I have @ preceding the {{ because I am using Blade):

<a href="#"
   class="list-group-item"
   v-repeat="responder: responders"
   v-on="click: showResponder(responder)">
    <div class="media">
        <div class="media-left">
            <img src="" v-attr="src: responder.avatar" alt="" class="media-object"/>
        </div>
        <div class="media-body">
            <h4 class="media-heading">@{{ responder.first_name }} @{{ responder.last_name }}</h4>
            <p>
                <strong><i class="fa fa-phone"></i> Phone:</strong> @{{ responder.phone }}
            </p>
        </div>
    </div>
</a>

And the Javascript:

var vm = new Vue({
    el: "#responderContainer",
    data: {
        activeResponder: null,
        responders: []
    },
    methods: {
        showResponder: function(responder)
        {
            // Here is where I wish to prevent the 
            // link from actually firing its default action
            responder.preventDefault();
            this.activeResponder = responder;
        }
    }
});

This works as far as grabbing the responder object but fires the link - I need to be able to both e.preventDefault() AND get the object.

Thanks!

nils · Accepted Answer · 2016-07-21 06:38:23Z

62

Alternatively, in Vue 1.x, you could also use the event modifier .prevent:

HTML:

<a v-on:click.prevent="showResponder(responder)">...</a>

You could stop propagation as well:

<a v-on:click.prevent.stop="showResponder(responder)">...</a>

JS:

...
            showResponder: function(responder)
            {
                // No need to prevent any more
                this.activeResponder = responder;
            }
...

edited Jul 21, 2016 at 6:38

answered Apr 1, 2016 at 22:14

nils

27.4k6 gold badges73 silver badges82 bronze badges

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

4 Comments

Mladen Danic Over a year ago

It should actually be v-on:click.prevent

Adam Reis Over a year ago

How do you prevent event propagation when there is no method to call, e.g. a simple <a href="mailto:[email protected]"> link?

iamface Over a year ago

To @MladenDanic's point, prevent will prevent default behavior, and prevent.stop will also stop propagation. For example: If you are triggering a custom method from an anchor click in a dropdown navigation, prevent.stop will also prevent the 'click' event, and leave the dropdown open. prevent will halt the anchor link, but allow the event to bubble for the 'click' behavior

Jota Pardo Over a year ago

@AdamReis In my case I wanted to prevent click on the tr from a table when I clicking in an ' href` without a method. I used .self in the ' td` and moved the method from the tr' to each td`. Check it out: stackoverflow.com/questions/68838076/…

Patrick Evans · Accepted Answer · 2015-05-29 18:30:20Z

32

The documentation shows you can pass $event to get the event object

http://vuejs.org/guide/events.html

<button v-on="click: submit('hello!', $event)">Submit</button>

/* ... */
{
  methods: {
    submit: function (msg, e) {
      e.stopPropagation()
    }
  }
}
/* ... */

So you want the v-on attribute to be

v-on="click: showResponder(responder,$event)"

and the function definition to be

showResponder: function(responder,e)

answered May 29, 2015 at 18:30

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

Comments

Ahmad · Accepted Answer · 2021-08-20 14:44:59Z

4

Use

@click.stop

on a parent element to stop event bubbling if you want to use href and not the custom click events.

<div @click.stop>
  <a href="//google.ca">Google</a>
</div>

answered Aug 20, 2021 at 14:44

Ahmad

671 bronze badge

Collectives™ on Stack Overflow

VueJS - Prevent Default on link click but also capture object

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related