Vuejs - Introducing Vue-Resource with GET Requests Posted on November 19, 2015

Data Sources

Sometimes the data that we need on our page we cannot always send along to get rendered at the same time. Certain applications may need to call an API to get some form of specific data.

Before if you used jQuery we could accomplish this by using the $.ajax(); request. Vuejs out of the box does not handle Ajax requests however, with that being said we have another package in the Vuejs family called Vue-Resource (https://github.com/vuejs/vue-resource).

Introducing Vue-Resource

Vue-Resource is a plugin for Vue-js that provides services for making web requests and handling responses. What does that all mean? It means we can run ajax commands through our code and handle the responses with ease :)

Installing Vue-Resource

Installing the plugin is super easy. All we need to do is add it to our page. Once again I will be using a cdn, but you can download it and store it on your server if you wish. Before the closing tag I have the following scripts.

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.4/vue.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.16/vue-resource.min.js"></script>

That's it! That is all we need to do to start using Vue-resource. No need to Elixer, Browserify, Gulp, Require-js... let's keep this simple :)

Sending Requests

In order to send a request first we need to work on our Vuejs application. I am going to build a list of users using a free REST API that you can use for testing and prototyping, JSONPlaceholder which you can read more about it here http://jsonplaceholder.typicode.com/

I am going to be requesting a list of users after the user clicks the Load Users button. We could do this at page load and I will show you an example of that at the bottom of this post. For now let's build our Vue Application.

If you are following along from the previous post I am adding an event on to my button. This event will fire when the user presses it, and it will also stop any continuation (following the link).

<a href="#"
  class="btn btn-success"
  @click.stop="loadUsers">Load Users</a>

Now we have to define and write the method to load our users up.

new Vue({
  el: '#vueApp',
  data: {
    debug: true,
    users: []
  },
  methods: {
    loadUsers: function() {
      this.$http.get('http://jsonplaceholder.typicode.com/users', function(data, status, request){
        if(status == 200)
        {
          this.users = data;
        }
      });
    }
  }
});

Let's take a closer look at what is actually happening. First we have our Vue instance and we have added some default data. Debug and Users. debug is used to only debug our application, while users is going to hold the users we get in return.

Our loadUsers method uses Vue-Resource to call a HTTP GET with ajax. As you can see the structure for calling a resource is

this.$http/get('url', [parameters], callback(data, status, request{}));

You can see by visiting our API call http://jsonplaceholder.typicode.com/users we get a JSON object of users. When it is assigned to our data, we have access to each of those properties: id, name, username, email, etc...

We haven't covered the next part that we are going to look at, but it should be straight forward if you have any programming knowledge. We are going to be loop through each of the users in our variable and display them on the screen.

<ul>
  <li v-for="user in users">
    {{ user.name }} - {{ user.email }}
  </li>
</ul>

When you are looking at the code, you will notice that nowhere do we need to tell Vuejs to "re-do" that code. Vuejs is smart enough to see that the variable has changed, and it will update our li elements automatically for us.

So in this code we are taking our variables users and looping through all of them. In English it says 'For each user in users do the following'. This allows us to access each property from our returned ajax call.

Next Steps

As I mentioned I would show you how to call the function at load time. This is extremely easy and all we need to do is add another method into our Vue called ready.

new Vue({
  el: '#vueApp',
  data: {
    // variables
  },
  ready: function(){
    this.loadUsers();
  },
  methods: {
    loadUsers: function() {
      // rest of original code
    }
  }
});

That's it for now, next we will look at posting data to a page.

Share this post