CODEWITHSUNDEEP
javascriptvue.jsvuejs2async-await
user3653474
user3653474

Reputation: 3852

async await returning [object Promise] in vue.js

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.

Upvotes: 0

Views: 3100

Answers (1)

Ashwin Bande
Ashwin Bande

Reputation: 3073

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.

Upvotes: 1

Related Questions