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"
}
}