javascript - 异步请求完成后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在for 反应性中分配新的对象引用。

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 文档