Cannot fetch the return value in using axios in Vue.js

Question

How can i fetch the return value using this code.

axios.get('/task')
    .then(response => {
        this.tasks = response.data.tasks;
        return this.tasks;
});

It is a possible with this code or is any other means on how I can retrieved the value. I cannot retrieved tha value using the return.

Thanks in advance.

What are you trying to achieve by returning the value like this? — user9246109
– user9246109, Commented Jan 22, 2018 at 5:09
To create the table for Vue.js together with the search and pagination functionality. — Jayjay
– Jayjay, Commented Jan 22, 2018 at 5:13
Please read the documentation on Promise objects. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…. — user320487
– user320487, Commented Jan 22, 2018 at 6:56

tony19 · Accepted Answer · 2022-07-15 05:13:33Z

1

I suggest you to read about Vue's principle concepts such as its data reactivity system: https://v2.vuejs.org/v2/guide/reactivity.html

By setting local state like you do (this.tasks = response.data.tasks;), view elements react to data changes automagically and render accordingly.

For example, if you have a bunch of tasks that should be rendered, you could have something like this:

<template>
  <div class="tasks">
    <div v-for="task in tasks" class="task">{{ task }}<div>
  </div>
</template>

Whenever the HTTP request finishes and you set this.tasks = response.data.tasks, all of the tasks are automatically rendered. To answer your question: there is really no need to return after the request completes.

edited Jul 15, 2022 at 5:13

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 22, 2018 at 5:34

user9246109

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

Comments

Gautam Patadiya · Accepted Answer · 2018-01-22 05:50:31Z

0

Have you tried like this?

let base = this;
axios.get('/task')
    .then(response => {
        base.tasks = response.data.tasks;
        return base.tasks;
});

answered Jan 22, 2018 at 5:50

Gautam Patadiya

1,41214 silver badges19 bronze badges

5 Comments

Jayjay Over a year ago

Yes. but still the same. Value does not return using the above code

Gautam Patadiya Over a year ago

are you sure that response.data.tasks is returning you value?

Gautam Patadiya Over a year ago

Here you are using Arrow Syntax that's why your 'this' keyword getting conflict but I used base variable to get parent 'this' and I returned it. thing is make sure that you get value in response.data.tasks

Jayjay Over a year ago

Yes response.data.tasks. returns a value but when i use the code return this.data.tasks. And call the function. Its returns undefined. function getTaskData() { let base = this; axios.get('/task') .then(response => { base.tasks = response.data.tasks; return response.data.tasks; });

Gautam Patadiya Over a year ago

you can hold it in one variable and then try to return variable

Collectives™ on Stack Overflow

Cannot fetch the return value in using axios in Vue.js

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related