Как передать индекс массива в изображение sr c в Vuejs v-img?

Question

Эй, я пытаюсь перебрать массив URL-адресов, чтобы вставить его в мой атрибут src. Я не уверен насчет правильного синтаксиса. Вы можете помочь мне? У меня есть мой массив с именем DataArray, созданный из URL-адресов изображений, и я хочу вставить его в v-img в v-row. Я попробовал это :src=DataArray[n], но это не правильный путь.

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

Answer 1

Измените это:

let DataArray = doc.data().Array;

на:

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

И используйте это, чтобы показать изображение:

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

n-1, потому что v-for вы используете на основе 1.