Vuejs2 Firebase存储getDownloadURL创建无限循环

当试图从firebase存储中的上传文件中检索URL时，我会得到一个无限循环，它会锁定我的浏览器

HTML

获取数据

created: function() {
  db.collection('shops').doc(vm.$route.params.id)
  .collection('inventory').get()
  .then(res => {
    res.forEach(doc => {
      const id = doc.id
      const data = doc.data()
      vm.data.push({ id, ...data })
    })
  })
}

---

如果在获取数据的同时获取图像的url，似乎不会导致无限循环

HTML

---

我不熟悉vue，但错误消息看起来与您显示的代码无关。请添加什么是数据，如何获取和存储数据。我可以通过在直接下载数据时获取图像使其正常工作（请参阅更新）。我在vue中执行类似操作时也遇到了此问题。然而，我发现，根据中的Firebase团队的说法，URL似乎是要持久化的。“客户端每次调用[

getDownloadURL（）

]都是浪费时间。”

get_image_url: function(id, images) {
  storage.ref().child('products/' + id + '/' + images[0]).getDownloadURL()
  .then(url => {
    console.log(url)
    return url
  })
  .catch(err => {
    console.log(err)
  })
}

created: function() {
  db.collection('shops').doc(vm.$route.params.id)
  .collection('inventory').get()
  .then(res => {
    res.forEach(doc => {
      const id = doc.id
      const data = doc.data()
      vm.data.push({ id, ...data })
    })
  })
}

<div class="row" v-for="(item, idx) in data" :key="item.id">
  <img :src="item.url">
</div>

created: function() {
  db.collection('shops').doc(vm.$route.params.id)
  .collection('inventory').get()
  .then(res => {
    res.forEach(doc => {
    storage.ref().child('products/' + doc.id + '/' + doc.data().images[0]).getDownloadURL()
    .then(resp => {
      const id = doc.id
      const data = doc.data()
      const url = resp
      vm.data.push({ id, resp, ...data })
    })
    .catch(err => {
      console.log(err)
    })
  })
}