Load JSON data with vue-resource in Vue.js

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

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;
            console.log(response)

           }, response => {
           // error callback
           });

         }
       })

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

        

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