Vuejs Events Posted on November 18, 2015

Events

Event in Vuejs are just what you imagine. Any time something is triggered by clicking, getting focused, or on a keypress you can have Vuejs fire off to a method. This acts the same as using the html behaviour of things like "onclick". In Vuejs the syntax we are going to be using will be either the full syntax

<a href="#" v-on:click="toUpperCase">

or the shorthand (does not matter which one)

<a href="#" @click="toUpperCase">

If we look at the small sample above we see that when we click the link (a tag) we are going to send an event to the method named toUpperCase.

Methods

When using methods in Vuejs, the easiest way to think about them is how they are very similar to functions in javascript. Only exception is that we have to write our function (method) inside of our Vuejs object iself instead of anywhere on the page.

If you remember from a our last post we created a Vuejs object. Let's work on expanding that object and adding a button to save our data into another variable. In the end you could be sending this data to an API to be saved but for now let's just put it in a variable.

When we declare our methods in Vuejs we need to edit our Vue object. We are going to be adding a saveData method to our application.

new Vue({
    el: '#app',
    data: {
        yourName: 'Michael',
        savedName: '',
    },
  methods: {
    saveData: function() {
      this.savedName = this.yourName;
    }
  }
});

We added a new variable called savedName and we added a method into our methods. This gives us access to this specific method (function) in our Vue application. With this method we will be calling it when the user clicks the save button.

<div class="form-group">
      <button @click="saveData">Save Data</button>
</div>

Here we have some regular HTML markup however, you will notice that on our button input we now have an attribute of @click. This is a Vuejs attribute and the shortname of v-on:click. The next parameter (inside the quotes) is the method we want to be fired. So when the user clicks this button we want to fire the saveData() method found inside our Vue Object. If you want to see it in action you can by going here http://codepen.io/tutelagesystems/pen/xwMPJE

Next post we will be looking at how to use VueResource to pull in data (GET) and to save data (POST)

Share this post