在vue中呈现数据之前，如何等待创建的变量发生更改

Question

我有一个变量，它被称为"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()中的一个新变量，称为query。但每次我引用它时，我都会得到一个错误，因为名称是未定义的。这是我的问题，我正在尝试提交

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>