Express VueJS方法返回承诺。如何在模板中显示数据

VueJS前端使用axios从Express API检索数据。数据作为承诺返回。我不知道如何在模板中显示它。我们的目标是将这些数据添加到排行榜中，因此我首先进行查询以获取用户名和分数（这是一个总和），然后进行第二次查询以获取每个用户最后一次活动的数据

这是代码

排行榜组件：

<template>
  <table class="ui celled table">
    <thead>
      <tr><th colspan="4">Leaderboard for {{ currentGroup.name }}</th></tr>
      <tr>
        <th>Username</th>
        <th>Last Action</th>
        <th>Date</th>
        <th>Score</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(leader) in leaderboard" :key="leader.users_id">
        <td>
          <h4 class="ui image header">
            <img v-if="leader.avatar_url" :src="leader.avatar_url"  class="ui mini rounded image">
            <v-gravatar v-else :email="leader.email" class="ui mini rounded image" />
            <div class="content">
              {{leader.username}}
            </div>
          </h4>
        </td>
        <td>{{ lastActByUser(leader.users_id).deed }}</td>
        <td></td>
        <!-- <td>{{ lastAct(leader.id).deed }}</td>
        <td>{{ moment(lastAct(leader.id).created_at).strftime("%A, %d %b %Y %l:%M %p") }}</td> -->
        <td>{{leader.count}}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import moment from 'moment-strftime'
import _ from 'lodash'
import ReportsService from '@/services/ReportsService'
import ActsService from '@/services/ActsService'
export default {
  name: "Leaderboard",
  data() {
    return {
    }
  },
  computed: {
    leaderboard () {
      return this.$store.getters.leaderboard;
    },
    currentGroup () {
      return this.$store.getters.currentGroup;
    }
    // ,
    // lastAct (userId) {
    //   return _.orderBy(this.actsByUser(userId), 'created_at')[0];
    // }
  },
  mounted () {
    this.getLeaderboard();
  },
  methods: {
    getLeaderboard: async function () {
      console.log('currentGroup: ', this.$store.getters.currentGroup)
      this.$store.dispatch("updateLeaderboard", this.$store.getters.currentGroup);
    },
    moment: function (datetime) {
      return moment(datetime);
    }
    ,
    async lastActByUser (leader_id) {
      console.log('getting last act for user')
      const response = await ActsService.fetchLastActByUser ({
        userId: leader_id
      });
      this.deed = response.data.deed
      this.created_at = response.data.created_at
      console.log('lastAct response: ', response.data)
    }
  }
};
</script>

这是快车路线：

const express = require('express');
const User = require('../models/User');
const auth = require('../middlewares/authenticate');
const Act = require('../models/Act');

let router = express.Router();

router.get('/', async (req, res) => {
  const acts = await Act
    .query().eager('user');
  res.json(acts);
});

...
// GET last act for specified user
router.post('/last_by_user', async (req, res, next) => {
  const lastAct = await Act
    .query()
    .findOne({
      users_id: req.body.userId
    });
  console.log('lastAct on server side is: ', lastAct)
  res.json(lastAct);
})

module.exports = router;

---

因此，如果我理解正确，您希望在模板中显示从外部API获取的排行榜数据吗？如果我看得没错，您已经将其存储在vuex存储中，并使用计算getter将其从存储中取出。对吗？对。排行榜正确地拉取并显示按每个用户的行为总数排序的用户名。现在我想包括信息：每个用户的最后一次行动，例如，他们做的最后一件事和他们做的时间。你能提供更多的数据吗？你的vuex商店看起来怎么样？从服务器中提取的JSON数据是什么样子的？尝试和你在排行榜上做的一样。@techouse我正在从backen s.t控制台.log（'lastAct response:'，response.data）获取数据，返回类似lastAct response:{id:1，契约：“Writing”，用户id:1，创建地点：“2019-09-23T15:28:22.723Z”，更新地点：“2019-09-23T15:28:22.723Z”}。但我无法获取要在模板中显示的数据。e、 g.{lastActByUser（leader.users_id）}返回[object Promise]，当然它会返回它。你把苹果和桔子混合在一起。不能在模板中同步调用异步方法。您必须在

.then（）

方法中解析承诺，并在那里更新

数据

属性。只有这样，才能在模板中打印该

数据
属性。请阅读此文，如果我理解正确，您是否希望在模板中显示从外部API获取的排行榜数据？如果我看得没错，您已经将其存储在vuex存储中，并使用计算getter将其从存储中取出。对吗？对。排行榜正确地拉取并显示按每个用户的行为总数排序的用户名。现在我想包括信息：每个用户的最后一次行动，例如，他们做的最后一件事和他们做的时间。你能提供更多的数据吗？你的vuex商店看起来怎么样？从服务器中提取的JSON数据是什么样子的？尝试和你在排行榜上做的一样。@techouse我正在从backen s.t控制台.log（'lastAct response:'，response.data）获取数据，返回类似lastAct response:{id:1，契约：“Writing”，用户id:1，创建地点：“2019-09-23T15:28:22.723Z”，更新地点：“2019-09-23T15:28:22.723Z”}。但我无法获取要在模板中显示的数据。e、 g.{lastActByUser（leader.users_id）}返回[object Promise]，当然它会返回它。你把苹果和桔子混合在一起。不能在模板中同步调用异步方法。您必须在
.then（）
方法中解析承诺，并在那里更新
数据
属性。只有这样，才能在模板中打印该
数据
属性。也许读一下这个
const express = require('express');
const User = require('../models/User');
const auth = require('../middlewares/authenticate');
const Act = require('../models/Act');

let router = express.Router();

router.get('/', async (req, res) => {
  const acts = await Act
    .query().eager('user');
  res.json(acts);
});

...
// GET last act for specified user
router.post('/last_by_user', async (req, res, next) => {
  const lastAct = await Act
    .query()
    .findOne({
      users_id: req.body.userId
    });
  console.log('lastAct on server side is: ', lastAct)
  res.json(lastAct);
})

module.exports = router;