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
http://ilikecoding.net/membership/public/api/memberships and show them in Vue component
This is the html template which we are going to use and you can see js libs in head section
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!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> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.5.0/vue-resource.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> |
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/public/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