How to work with async await function in the view with Vuejs/Laravel

Question

Hi I am trying to get information from the controller with the async function and I do this in the component:

I need to send the parameters, because I have seen similar answers with mounted() but they do not send parameters to the function so if I do not add parameters it will not work.

View part:

<tbody>
  <tr v-for="(post, index) in last_month_day" v-bind:index="index">
    <td>{{ index+1 }}</td>
    <td v-for="(post2, index2) in branch_office_posts" v-bind:index="index2">
      $ {{ getTotalIncomes(index+1, post2.branch_office_id) }}
    </td>
  </tr>
</tbody>

I need to pass those two parameters to the function: index+1 and post2.branch_office_id

Then I do this in the method part:

methods: {
  async TotalIncomeData(day, branch_office_id) {
    const response = await fetch('/api/collection/total/'+day+'/'+branch_office_id+'?api_token='+App.apiToken)
    return response;
  },
  getTotalIncomes(day, branch_office_id) {
    return this.TotalIncomeData(day, branch_office_id);
},

It works I mean if check the response with console.log() It gets a value. I know that I can not use the async await function in the view, that's why I use another function to call this one inside how you can see BUT I do not know why I am not using it directly to the view and it says this:

$ [object Promise]

So It does not show the value, so I wonder why? what is wrong in the code? I really need a HELP Thanks!

You need to return a promise, then do .then() to handle the result — Alicia Sykes
– Alicia Sykes, Commented Apr 24, 2022 at 14:05
Does this answer your question? Async / Await method in Vue.js — Alicia Sykes
– Alicia Sykes, Commented Apr 24, 2022 at 14:42
@Lissy93 no, because this guy is not adding parameters to the function and he did not return anything — Medicina NA
– Medicina NA, Commented Apr 24, 2022 at 14:44

Alicia Sykes · Accepted Answer · 2022-04-24 14:24:07Z

0

You could have a data attribute storing the response. Then call the function to make the request, and anything in the UI bound to the data will be updated accordingly.

The part you were missing was the .then(...), which is outlined in a bit more detail in the fetch docs.

For example:

data: () => ({
  response: null,
}),
methods: {
  fetchData() {
    fetch(`/api/collection/total/${day}/${branch_office_id}?api_token=${App.apiToken}`)
    .then(
      (response) => { this.response = response; }
    );
  },
},

Now, within your UI, check that the response has finished returning, v-if="response", then display it however you need.

answered Apr 24, 2022 at 14:24

Alicia Sykes

7,3928 gold badges39 silver badges71 bronze badges

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

6 Comments

Medicina NA Over a year ago

But If I add that (response) => { this.response = response; } I can not return the value

Alicia Sykes Over a year ago

Is there a reason you need to return the value? You can pass that to any processing function, and set it as data attribute for the UI.

Alicia Sykes Over a year ago

If you can share more of your code, then I can tailor the solution better to your needs.

Medicina NA Over a year ago

Is there a reason you need to return the value? You can pass that to any processing function, and set it as data attribute for the UI. – Yes I need to pass day and branch_office_id and I need to return the value from the fetch or axios , could I chat with you?

Alicia Sykes Over a year ago

chat.stackoverflow.com/rooms/244153/…

|

Collectives™ on Stack Overflow

How to work with async await function in the view with Vuejs/Laravel

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related