Vue Load JSON File

From rbachwiki
Revision as of 21:53, 3 December 2018 by 108.53.114.162 (talk) (Created page with "<pre> <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.l...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
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"
        }
}