Vue.js在异步请求完成后显示结果

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