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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <title>Vue.js load data with JSON</title> </head> <body> <div id='root'> <products-list :products="products"> </products-list> </div> </body> <script> </script> </html> |
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
|
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 29 30 31 32 33 34 35 36 37 |
<script> Vue.component('products-list', { template:"<div class='x'>\ <ul v-for='product in products'>\ <li> {{product.name}} {{product.price}} </li>\ </ul>\ </div>\ ", props:['products'] }) new Vue({ el: "#root", data: { active : true, products :[], }, components :{ }, mounted () { $.getJSON('http://ilikecoding.net/membership/api/memberships', json => { this.products = json.data console.log(json.data) }) } }) </script> |
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