Vue2 从 api 回调中设置一个变量

Question

我有这个功能 return 回调为：

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) }
    })
  })
}

在vue文件中我尝试将其设置为：

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

或

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

None 它们可以工作，我想在安装组件时准备好这个 shifts 变量，这样我就可以把它放在 <app v-for="shift in shifts" />

目前，此代码在 <b-table :items="fetchShifts /> 上运行良好，但我不知道如何转换为 <ul v-for="shift in shifts></ul>

Answer 1

这样试试：

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

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

说明 - 最初您从一个空数组开始。然后你异步获取班次。一旦获取了所有班次和相应的用户，就会调用回调 - 在此回调中，您使用班次更新数组，这反过来会触发组件重新渲染。

Vue 真的很棒！

Vue2 从 api 回调中设置一个变量

Vue2 set a variable from an api callback

vue.js

vue-component

vuejs2