Vuejs display result after completion of async request

Question

I am displaying the name of the current user after querying it from the firestore database like so:

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

then after fetching the result it should be something like below:

However it does not display the name after the result is fetched immediately,since it takes some time. I am only able to show it after I change some property such as the margin.

How can I display it immediately the result is caught.

My template code:

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

tony19 · Accepted Answer · 2022-07-15 21:41:55Z

3

Assign new object reference in the this.currentUserDetails for reactivity.

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

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

Alternate: you can use this.$set() to get the reactivity working:

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

Vue.js Docs

edited Jul 15, 2022 at 21:41

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Apr 25, 2019 at 4:54

Sajib Khan

24.4k9 gold badges69 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vuejs display result after completion of async request

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related