如何在 vue 中渲染数据之前等待创建的变量更改？

Question

我的 data() 中有一个名为“name”的变量。一旦我使用 created() 从 firebase 获取这个值，它就会更新，如下所示：

created: async function fetchDataFromFirebase() {
        this.email = this.getCurrentUser().email
        await this.doctorsCollection.doc(this.email).get().then(async (doc) => {
            this.name = await doc.data().title + ' ' + await doc.data().firstName + ' ' + await doc.data().lastName
            this.speciality = await doc.data().speciality
            this.phone = await doc.data().phone
            this.profilePicture = doc.data().img == null || doc.data().img === '' ? 'https://firebasestorage.googleapis.com/v0/b/healthy-wo.appspot.com/o/doctors%2FMantraHW-T-Coral-01.png?alt=media&token=2ae855cb-c96d-4b97-b813-c844f9e0e871':doc.data().img
            // getCurrentAge will give the difference in years between today and the Date object you're passing
            this.age = this.getCurrentAge(new Date((await doc.data().birthDate).toMillis())) + ' años'

            // memberDate is a variable that holds the date this user was registered but in Date object format
            let memberDate = new Date((await doc.data().subscriptionStart).toMillis())
            this.member_duration = memberDate.getDate() + '/' + (memberDate.getMonth()+1<10 ? '0'+(memberDate.getMonth()+1):memberDate.getMonth()+1) + '/' + memberDate.getFullYear()
        })
    },

我的问题是，我必须等待这个变量更新，然后将它分配给 data() 中的一个新变量，称为查询。但是每次我将它引用为 this.name 时，我都会收到一个错误，因为 name 未定义。这是我正在尝试提交的查询

query: firebase.firestore().collection('feed').limit(3).where('author', '==', /*here goes name*/),

我必须在 data() 中有这个查询变量，因为我必须将它作为道具传递给新组件：

<post-card
  v-bind:query="query"
></post-card>

这也是我的数据（）：

data() {
        return {
            doctorsCollection: firebase.firestore().collection('doctors'),
            name: 'hello',
            query: firebase.firestore().collection('feed').limit(3).where('author', '==', this.name),
            speciality: '',
            member_duration: '',
            email: '',
            phone: '',
            age: '',
            profilePicture: '',
            dialog: false
        }
    },

Answer 1

我刚刚通过将查询更改放在 created 中解决了它。

created: async function fetchDataFromFirebase() {
        this.email = this.getCurrentUser().email
        await this.doctorsCollection.doc(this.email).get().then(async (doc) => {
            this.name = await doc.data().title + ' ' + await doc.data().firstName + ' ' + await doc.data().lastName
            this.speciality = await doc.data().speciality
            this.phone = await doc.data().phone
            this.profilePicture = doc.data().img == null || doc.data().img === '' ? 'https://firebasestorage.googleapis.com/v0/b/healthy-wo.appspot.com/o/doctors%2FMantraHW-T-Coral-01.png?alt=media&token=2ae855cb-c96d-4b97-b813-c844f9e0e871':doc.data().img
            // getCurrentAge will give the difference in years between today and the Date object you're passing
            this.age = this.getCurrentAge(new Date((await doc.data().birthDate).toMillis())) + ' años'

            // memberDate is a variable that holds the date this user was registered but in Date object format
            let memberDate = new Date((await doc.data().subscriptionStart).toMillis())
            this.member_duration = memberDate.getDate() + '/' + (memberDate.getMonth()+1<10 ? '0'+(memberDate.getMonth()+1):memberDate.getMonth()+1) + '/' + memberDate.getFullYear()
        })
        this.query = firebase.firestore().collection('feed').limit(3).where('author','==', this.name.toString())
    },
    data() {
        return {
            doctorsCollection: firebase.firestore().collection('doctors'),
            name: 'hello',
            query: 'null',
            speciality: '',
            member_duration: '',
            email: '',
            phone: '',
            age: '',
            profilePicture: '',
            dialog: false
        }
    },

并且还在我的组件中使用 v-if 语句。所以它不会被渲染，除非查询与初始字符串不同。

<post-card
    v-if="query !== 'null'"
    v-bind:query="query"
></post-card>