Vue Load JSON File
Jump to navigation
Jump to search
<template> <div class="category-itemthumb"> <h2>Gallery</h2> <div v-for="item in gallery.categories" v-bind:key=item.id class="items"> <a :href="item.link"> <img :src="desctributiondir + item.image + ext"> </a> <p>{{item.name}}</p> </div> </div> </template> <script> import myjson from './gallerycategories.json' export default { data(){ return{ gallery: myjson, desctributiondir: "/dist/", ext: ".jpg", viewlocal:"/src/assets/" } } } </script>
JSON SNIPPET
{ "categories":[ { "id": 1, "name": "Places and Ideas", "image": 40, "description":"", "link": "http://www.vortexcreativecenter.com/gallery/index.php?/category/40" }, { "id": 2, "name": "Portraits", "image": 41, "description":"", "link": "http://www.vortexcreativecenter.com/gallery/index.php?/category/41" }, { "id": 3, "name": "Surface Designs and Murals", "image": 43, "description":"", "link": "http://www.vortexcreativecenter.com/gallery/index.php?/category/43" } }