Starting Out With VueJS Part 2
In this short bolt-on tutorial we are going to look at how to change where the data is coming from in our Film Watch list example. Instead of the data being hard coded into the Vue instance we are going to pull it in from a separate location using an AJAX request. Now creating a REST API is well beyond the scope of this tutorial so instead we are just going to put our data into a JSON file and request that.
AJAX Request For Mr JSON
So first our data. I’ve expanded the data a little and placed it into a file called data.json (creative I know) and put that inside a folder called json in the root of our project. The data looks like this:
|
1 2 3 4 5 6 7 8 9 10 |
{ "movies": [ { "title": "The Boy", "watched": false }, { "title": "Avengers: Age of Ultron", "watched": true }, { "title": "Avengers Assemble", "watched": true }, { "title": "Scott Pilgrim", "watched": true }, { "title": "Tron: Legacy", "watched": true }, { "title": "The Hunger Games: Mockingjay Part 2", "watched": false } ] } |
Now to request the data we could use jQuery’s AJAX methods, but we are going to use vue-resource instead. You can download it from the github repo or you can pull it from one of the many CDNs out there. Attach it to your document after Vue and you should be good to go.
Now. We need to modify our original Vue instance to add remove our hard coded data and put in a placeholder for our external data.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
new Vue({ el: '#app', data: { movies: false, error: false, }, ready: function() { this.$http({ url: '/json/data.json', method: 'GET' }).then(function(response) { this.$set('movies', response.data.movies) }, function(response) { this.$set('error', true) }); }, }); |
Here you can see we have removed our data and replaced it with a boolean. This is to make sure whatever elements use the data as a conditional know it is empty when the page is first loaded. You could, if you wish, add a second variable to use as a loading indicator and set that to true any time your are loading the data. However, we are going to keep it simple here since the data only loads at page load and use the movies variable as an indicator as to if the data is loaded yet.
The second new part you may have noticed is the ready method. This is (in simple terms) triggered once Vue has attached to the $el and is ready to go, a great place to ask Vue to get our data. This is also where we get to use vue-resource. It should be pretty self-explanatory, we just ask it to grab the data from our JSON file and set the movies variable with the data. If there is an error we set an error variable we’ve added to the data property to true.
Wrapping Up
Now see if you can add in the elements for no movies being available & for there being an error. If you get stuck you can find the full modified HTML below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<div class="container" id="app"> <div class="col-md-12"> <table v-if="movies" class="table"> <thead> <tr> <th>Title</th> <th>Watched</th> </tr> </thead> <tbody> <tr v-for="movie in movies"> <td><span v-if="!movie.watched">{{ movie.title }}</span><del v-if="movie.watched">{{ movie.title }}</del></td> <td> <input type="checkbox" name="watched" v-model="movie.watched" /> </td> </tr> </tbody> </table> <div class="alert alert-info" v-if="!movies && !error"> <p>There are no movies available!</p> </div> <div class="alert alert-danger" v-if="error"> <p>There was an error retrieving the data</p> </div> </div> </div> |
That’s it. We are all done. You now have a Film Watch list that is pulling data from an external source. Soon we will take a look at how to build a simple REST API using Lumen (Laravel’s Micro Framework) and take our data from that and have changes persist by saving them back to the API. Look out for it soon.
