Load json data to component in Vue

January 11, 2018

In this tutorial, we will see how we can load JSON data to a component in Vue.js. I am going to use following REST API end point to load data. In this example I am going to use the $.getJSON function which comes with the jQuery library.

To get the Json data to the vue component I am using following API end point
http://ilikecoding.net/membership/api/memberships

Now we will see how to code it

This is the html template which we are going to use




  
  
  
 
  Vue.js load data with JSON


  

In above code, we have used two javascript libary. One is for the Vue and other one is for the jQury

Now we will add the Vue code
Under scripts section, you can add the following code


Under mounted() you can see the getJSON() to load the data from the REST end point
The data will be loaded to the products variable