async await returning [object Promise] in vue.js

Question

I' using async function like this:

methods:{
    async getUser(id)
    { 
 
      const header = '........';
        let responses=await axios.get(`/api/backend/method/${id}` , {headers: header});
      return responses.data.name; 

    },

calling it on load of td in a loop, like this

<td v-html="getUser(request.id)"></td>

now in my td i get [object Promise] but in this variable responses.data.name there is name, i want to return that name. Any help is highly appreciated.

You're not calling getUser with await, so the returned value is its Promise. — Barmar
– Barmar, Commented Jan 16, 2021 at 7:04
I would instead suggest you adjust the method to affect data, then invoke the method inside some lifecycle hook, finally the template simply reads from data - or just use vuex (with module init) — Tibebes. M
– Tibebes. M, Commented Jan 16, 2021 at 7:06

Ashwin Bande · Accepted Answer · 2021-01-16 07:34:10Z

1

data() {
    return {
    // .... other vars
    usernames: {},
    requests: [],
    };
},
methods:{
    afterRequestLoaded() {
        this.requests.forEach((request) => this.loadusername(request.id);
    },
    async loadusername(id)
    { 
 
      const header = '........';
        let responses=await axios.get(`/api/backend/method/${id}` , {headers: header});
        this.usernames[id] = responses.data.name; 
    },

<tr v-for="request in requests">
   <td v-text="usernames[request.id]"></td>
</tr>

Note that afterRequestLoaded function should be executed when requests array is populated. perhaps by another api call.

answered Jan 16, 2021 at 7:34

Ashwin Bande

3,1232 gold badges13 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

async await returning [object Promise] in vue.js

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