CODEWITHSUNDEEP
vue.jsvuejs2vue-component
Sy Quoc
Sy Quoc

Reputation: 29

Vue2 set a variable from an api callback

I have this function return a call back as:

function fetchShifts(ctx, callback) {
const accountId = selectedAccount.value.value.id
store.dispatch('app-action-center/fetchShifts', {
  accountId,
})
  .then(shifts => {
    const data = []
    shifts.forEach(async (shift, index) => {
      const user = await store.dispatch('app-action-center/fetchUserDetails',
        {
          assignedTo: shift.assignedTo,
        })
        .then(res => res)
      data.push({
        ...shift,
        user: user.fullName,
      })
      if (index === (shifts.length - 1)) { callback(data) }
    })
  })
}

In the vue file I try to set it as:

data() {
 return {
   shifts: this.fetchShifts,
 }
},

or

data() {
 return {
   shifts: null,
 }
},
created() {
 this.shifts = this.fetchShifts()
}

None of them work, I want to make this shifts variable ready when the component mounted so I can put it in the <app v-for="shift in shifts" />

At this moment, this code work fine with <b-table :items="fetchShifts /> but I don't know how to convert to <ul v-for="shift in shifts></ul>

Upvotes: 0

Views: 263

Answers (1)

IVO GELOV
IVO GELOV

Reputation: 14269

Try like this:

<ul v-for="shift in shifts" :key="shift.id">
</ul>

export default
{
  data()
  {
    return {
      shifts: [],
    };
  },
  created()
  {
    this.fetchShifts(undefined, (shiftsArray) =>
    {
      this.shifts = shiftsArray;
    });
  }
}

Explanation - initially you start with an empty array. Then you asynchronously fetch the shifts. The callback is called as soon as all the shifts and the corresponding users have been fetched - and in this callback you update the array with the shifts, which in turn triggers component re-rendering.

Vue is truly amazing!

Upvotes: 1

Related Questions