O'Reilly logo

The Majesty of Vue.js by Kostas Maniatis, Alex Kyriakidis

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Migrating

It is time to use vue-resource in our example. First of all, we have to include it. We will add this line to our HTML file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.7.0/vue-resou\
rce.js"></script> 

To fetch the stories we will make a GET request in the corresponding form:

ready: function() {
    // GET request
    this.$http({url: '/api/stories', method: 'GET'}).then
    (function (response) {
        this.$set('stories', response.data)
        //Or we as we did before
        //vm.stories = response.data
    })
} 

Our list of stories comes without any problems using the preceding syntax.

Lets move on now with the DELETE and PATCH requests using the shortcut methods.

The PATCH request:

upvoteStory: function(story){ story.upvotes++; this.$http.patch('/api/stories/'+story.id ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required