Vue.js：从 Firebase 存储检索数据后如何异步加载模板？

Question

所以，我试图从我的 firebase 存储中检索一些 pdf 的链接。 当我获得链接时，我想将它们绑定到某些列表。 问题是在获取链接之前加载了模板，因此列表的 href 属性保持为空。我也在使用 Vuetify。

这是我的模板

<template>
  <v-layout row wrap v-if="count > 0">
    <v-flex v-for="n in count" :key="n">
      <v-card:href="link[n-1]" target="_blank">
        <v-icon>mdi-file-pdf</v-icon>
        <span>Module {{n}}</span>
      </v-card>
    </v-flex>
  </v-layout>

这是我的脚本

<script>
import firebaseApp from "@/firebase/init.js";
var storage = firebaseApp.storage();
var storageRef = storage.ref();
export default {
  name: "Dashboard",

  data() {
    return {
      id: this.$route.params.id,
      count: null,
      link: [],
      loading: null
    };
  },

  methods: {
    getFile() {
      this.link = [];
      this.loading = true;
      var listRef = storageRef.child(`folder_name${this.id}`);

      listRef.listAll().then(res => {
        this.count = res.items.length;
        for (let i = 1; i <= this.count; i++) {
          var starsRef = storageRef.child(`folder_name${this.id}/file_name${i}.pdf`);
          starsRef.getDownloadURL().then(url => {
            this.link[i - 1] = url;
          });
        }
        this.loading = false;
      });
    },
    updateId() {
      this.id = this.$route.params.id;
      this.getFile();
    }
  },

  created() {
    this.getFile();
  },

  watch: {
    $route: "updateId"
  }
};
</script>

链接数组最终将存储所有链接。 但它不会绑定到 span 标签如何在不使用 vuex 的情况下解决这个问题？ 提前致谢

Answer 1

getDownloadURL()方法是异步的并返回一个 Promise。 由于要对storageRef.child('folder_name${this.id}')所有文件并行执行此方法，因此应使用Promise.all()等待所有异步操作完成，然后再更新link数组.

以下使用forEach()而不是for循环应该可以解决问题（未经测试）：

 listRef.listAll()
 .then(res => {
    const promises = [];
    res.items.forEach(itemRef => {    //items is an array of Reference
         promises.push(itemRef.getDownloadURL());
    });
    return Promise.all(promises);
 .then(urls => {
   this.link = urls;
 });

然后，在您的组件中，您将执行以下操作：

  <v-layout row wrap v-if="count > 0">
    <v-flex v-for="(item, index) in link">
      <v-card :href="item" target="_blank">
        <v-icon>mdi-file-pdf</v-icon>
        <span>Module {{index + 1}}</span>
      </v-card>
    </v-flex>
  </v-layout>