Load JSON data with vue-resource in Vue.js

May 13, 2018

In this example we will see how we can load the JSON data to Vue using vue-resource.

You can use the following HTML template to start


  Vue.js load data with JSON


Now you can write the vue code under script section

new Vue({
        el: "#root",
        data: {
          products :[]
        mounted () {
            this.$http.get('http://ilikecoding.net/membership/api/memberships').then(response => {

          // get body data
            this.products = response.body.data;

           }, response => {
           // error callback


Add the follwing code the inside the div element of the HTML code

  • {{product.name}} {{product.price}}