How to pass array index in image src in Vuejs v-img?

Question

Hey im trying to iterate through an array of urls to feed it inside of my src attribute. I'm not sure about the correct syntax to use. Can you help me? I have my array called DataArray made of images url, and i want to insert inside of v-img in v-row. i tried this :src=DataArray[n] but it's not the correct way.

<template>
  <v-container v-if="Dataloaded" class="dark">
    <v-row no-gutters>
      <template v-for="n in 6">
        <v-col :key="n">
          <v-card dark class="mx-auto" max-width="344">
            <v-img :src=DataArray[n] height="200px"></v-img>

            <v-card-title>Title</v-card-title>

            <v-card-subtitle>Anime-Descriptions</v-card-subtitle>

            <v-card-actions>
              <v-btn text>View</v-btn>

              <v-btn color="purple" text>Explore</v-btn>

              <v-spacer></v-spacer>

              <v-btn icon @click="show = !show">
                <v-icon>{{ show ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
              </v-btn>
            </v-card-actions>

            <v-expand-transition>
              <div v-show="show">
                <v-divider></v-divider>

                <v-card-text>I'm a thing. But, like most politicians, he promised more than he could deliver. You won't have time for sleeping, soldier, not with all the bed making you'll be doing. Then we'll go with that data file! Hey, you add a one and two zeros to that or we walk! You're going to do his laundry? I've got to find a way to escape.</v-card-text>
              </div>
            </v-expand-transition>
          </v-card>
          <!-- spacing -->
          <br :key="1" />
          <br :key="2" />
        </v-col>
        <v-responsive v-if="n === 3" :key="`width-${n}`" width="100%"></v-responsive>
      </template>
    </v-row>
  </v-container>
</template>

<script>
import db from "@/Firebase/firebaseInit";

export default {
  name: "Grid",
  data() {
    return {
      DataArray: [],
      Dataloaded: false,
      show: false
    };
  },
  created() {
    let ArtData = db.collection("artworks").doc("yWnmwHTxMhvobLi21FNw");
    ArtData.get()
      .then(doc => {
        if (doc.exists) {
          // This variable contains all the necessary artworks for display
          let DataArray = doc.data().Array;
          console.log("Document data!:", DataArray);
          this.Dataloaded = true;
        } else {
          // doc.data() will be undefined in this case
          console.log("No such document!");
        }
      })
      .catch(function(error) {
        console.log("Error getting document:", error);
      });
  }
};
</script>

Do you see any images? The loop counter syntax is a little off but it seems adequate to at least show some images. — Dan
– Dan, Commented Apr 18, 2020 at 4:30
No i dont with [n], i tried to put manually a random url in my array in src to see if it appears and it did. — Lynn
– Lynn, Commented Apr 18, 2020 at 4:32

Dan · Accepted Answer · 2020-04-18 04:46:52Z

3

Change this:

let DataArray = doc.data().Array;

to:

this.DataArray = doc.data().Array;

And use this to show the image:

<v-img :src="DataArray[n-1]" height="50px"></v-img>

n-1 because the v-for you're using is 1-based.

answered Apr 18, 2020 at 4:46

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to pass array index in image src in Vuejs v-img?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related