Метод VueJS возвращает обещание. Как отобразить данные в шаблоне - PullRequest
Новая
       10

Метод VueJS возвращает обещание. Как отобразить данные в шаблоне

1 голос
/ 11 октября 2019

VueJS front использует 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>

здесь ActsService: 

import Api from '@/services/Api'

export default {
  fetchActs () {
    return Api().get('acts')
  },

...

  fetchLastActByUser (params) {
    console.log('calling the last act service with userId: ', params.userId)
    return Api().post('acts/last_by_user', params)
  },

}

вот маршрут Express: 

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;
...