[Vuejs]-How can I show the photos I took from api in my vue js project in col?

by

0👍

You can try with v-for loop:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      items: [{"id": 60, "brand": {"name": "Samsung"}, 
        "productImages": [{"id": 1, "image": {"url": "https://picsum.photos/200"}},{"id": 2, "image": {"url": "https://picsum.photos/200"}}]}],
    }
  }
})
slot="item" slot-scope="props"
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-main>
      <v-container>
      <span>Photos: </span>
      <v-col cols="12" sm="6" md="3" class="d-flex child-flex" v-for="item in items[0].productImages" :key="item.id" >
        <v-card class="mx-auto" style="width: 200px; height: 200px;">  
          <v-img :src="item.image.url"></v-img>
        </v-card>
      </v-col>
      </v-container>
    </v-main>
  </v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

Leave a comment