Vuejs отображать результат после завершения асинхронного запроса

Question

Я отображаю имя текущего пользователя после запроса его из базы данных firestore следующим образом:

 database
    .collection("members")
    .doc(id)
    .get()
    .then(doc => {
      this.currentUserDetails.name =
        doc.data().first_name + " " + doc.data().last_name;
    });

, затем после получения результата оно должно выглядеть примерно так:

Однако после немедленного извлечения результата имя не отображается, так как это занимает некоторое время.Я могу показать его только после того, как изменил какое-либо свойство, например, поле.

Как я могу отобразить его сразу же, как только результат будет обнаружен.

Код моего шаблона:

 <v-navigation-drawer app v-model="drawer" class="text-xs-center">
  <v-avatar class="mt-5 mb-4" size="100">
    <img src="/img/avatars/admin.png">
  </v-avatar>

  <p class="subheading font-weight-bold mb-1">{{currentUserDetails.name}}</p>
  <p class="text-capitalize mb-3">{{currentUserDetails.userType}}</p>

Answer 1

Назначьте новую ссылку на объект в this.currentUserDetails для реактивности.

this.currentUserDetails.name =
    doc.data().first_name + " " + doc.data().last_name;

// assign new object reference in 'this.currentUserDetails'
this.currentUserDetails = Object.assign({}, this.currentUserDetails)

Альтернатива: Вы можете использовать this.$set(), чтобы заставить реактивность работать:

// using this.$set(...)
this.$set(this.currentUserDetails, 'name', doc.data().first_name + " " + doc.data().last_name);

Vue.js Docs