VueJsLoops

Looping through nested objects

JSON File

{
"items":[
  {
    "Name": "Tee",
    "image": "two.jpg",
    "id": "1",
    "images":{
      "xname": "Red Tee Moulding",
      "Description":"Great for tables",
      "imagesfiles":[
        {"name":"one.jpg"}, {"name":"two.jpg"}
      ]
      }
  },
  {
    "Name": "Angle",
    "image": "five.jpg",
    "id": "1",
    "images":{
      "xname": "yellow Tee Moulding",
      "Description":"Great for tables",
      "imagesfiles":[
        {"name":"nine.jpg"}, {"name":"two.jpg"}
      ]
      }
  }


  ]

}

Template file

<template>
  <div class="container">
    <h1>Gallery Category</h1>
    <div v-for="item in art.items" class="category">
        {{item.Name}}
        {{item.image + ' / id:'+ item.id}}
        <br><br>
    </div>
      <div v-for="item in art.items" class="category">
        <div v-for="im in item.images.imagesfiles">
            {{im.name}}
        </div>
      </div>
  </div>
</template>
<script>
import myjson from '../assets/categories.json'
export default {

  data(){
    return{
       art: myjson,
    }// return
  }// data


} // export default

</script>