VueJs method and event handling

This entry is part 4 of 7 in the series VueJs

VueJs method and event handling is done very nicely and if you are coming from an angular background you will find yourself starting to pick up VueJs rather quickly and neatly.

If you are coming from jQuery then Vue and Angular take a different approach to handling click events, whereas jQuery would look like this:

<div id="click-example">Click me</div>

Well you can handle events in vuejs like so:

<div id="click-example">
    <div v-on:click="clickMe">
      Click me
new Vue({
  el: '#click-example',
  methods : {
      clickMe : function(){

Here is pen to show you:

See the Pen Vuejs by diquinnyonk (@diquinnyonk) on CodePen

Well wasn’t that simple, and thats how great vue is in terms of being able to achieve what you need but in simple terms.

Rather than using v-on:click. You can use shorthand syntax of @click

So what if you wish to pass attributes/data through to a method? well vue has that covered too:

<div id="click-example">
    <div v-on:click="clickMe('howdy')">
      Click me
new Vue({
  el: '#click-example',
  methods : {
      clickMe : function(input){

See the Pen Vuejs by diquinnyonk (@diquinnyonk) on CodePen

Again its nice and simple to work with input on a method. You can do quite a lot with this, which we will explore in future lessons.

Event modifiers

Have you had the need to use event.preventDefault() or event.stopPropagation()? You can still use these within your methods and pass an extra parameter in using the special $event parameter:

<button v-on:click="say('hello!', $event)">Submit</button>
// ...
methods: {
  say: function (msg, event) {
    // now we have access to the native event

Now you can do this but what is neater is adding these modifiers directly in the html itself.

Well you will have a need to add event modifiers to your methods, you might be wondering what this might look like, here are some event modifiers to get you understanding them quicker:

<!-- the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>
<a @click.stop="doThis"></a>

<!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>
<form @submit.prevent="onSubmit"></form>

<!-- modifiers can be chained -->
<a v-on:click.stop.prevent="doThat">
<a @click.stop.prevent="doThat">

<!-- just the modifier -->
<form v-on:submit.prevent></form>
<form @submit.prevent></form>

<!-- use capture mode when adding the event listener -->
<div v-on:click.capture="doThis">...</div>
<div @click.capture="doThis">...</div>

<!-- only trigger handler if is the element itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>
<div @click.self="doThat">...</div>

Doesn’t it look neater? I think so and I’m sure its just an extra line of Javascript no longer needed in your JS code. I think its very nice to have these available upon method assignment in your html.

Key modifiers

One last note is the need to narrow down events to specific keys on the keyboard:

<!-- only call vm.submit() when the keyCode is 13 -->
<input v-on:keyup.13="submit">

<!-- same as above -->
<input v-on:keyup.enter="submit">

<!-- also works for shorthand -->
<input @keyup.enter="submit">

Again its just nice and simple. Thanks for reading and lets keep learning.

Series Navigation<< VueJs directives introductionVueJs rendering lists – v-for >>

Random Posts