Vue生命周期和firebase:为什么我得到"TypeError:无法读取属性'url‘of null"？

Question

我正在和一个问题作斗争。我在我的模板中获得了这个图像元素，如下所示：

<img :src="photo.url" :id="photo.filename" :alt="photo.title" v-if="photo.url" />

下面是我的data()函数：

data() {
    return {
      photo: null,
      // set variable during component creation to use when mounting
      anno: {}
    }

我有一个为img元素获取数据的方法，如下所示：

async mounted() {
    // get photo properties
    await this.getPhotoDoc()
    // initialize Annotorious and assign to 'anno' variable for use throughtout component
    this.anno = await new Annotorious({ image: this.photo.filename })

下面是我处理照片文档的方法：

    async getPhotoDoc() {
      try {
        const docRef = await photosCollection
          .doc(this.$route.params.id) // to be dynamic
          .get()
        if (docRef.exists) {
          // data() returns all data about the doc
          let photo = await docRef.data()
          this.photo = photo
        } else {
          console.log('no docs exist for this photo')
        }
      } catch (error) {
        console.log('Error getting document:', error)
      }
    }

我似乎无法在控制台中摆脱这个错误：

[Vue warn]: Error in render: "TypeError: Cannot read property 'url' of null"
found in
---> <PhotoDetail>
       <App> at src/App.vue
         <Root>

有谁发现了什么我可以调整的吗？

Answer 1

因为照片是异步初始化的，所以在生命周期中有一个点，那就是photo是未定义的。对于这种情况，OP中的v-if不是一个足够的检查。将其更改为...

v-if="photo && photo.url"