Как дождаться данных в компоненте перед рендерингом в Vue + машинопись - PullRequest
Новая
       5

Как дождаться данных в компоненте перед рендерингом в Vue + машинопись

0 голосов
/ 14 октября 2019

В первом компоненте я открываю новую страницу, используя маршрутизатор Component_1.vue: 

let route = this.$router.resolve({ name: 'Schedule', params : { id: (this.schedule[0].schedule_id).toString() } });
window.open(route.href, '_blank');

router.ts: 

import Vue from "vue";
import Router from "vue-router";
import SchedulePage from "./views/SchedulePage.vue"

Vue.use(Router);

export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      // here is other routes
    },
    {
      path: "/schedule/:id",
      name: "Schedule",
      component: SchedulePage,
    },
  ]
});

SchedulePage.vue

Этот компонент отрисовывается до того, как schedule получает из асинхронной функции. Как решить эту проблему? Да, я прочитал этот вопрос , но я не понимаю, как хранить и возвращать обещания от created() или getSchedule()

<template>
  <schedule-table
    v-if = "schedule.length > 0"
    :exercises="schedule.exercises"
  />
</template>

<script lang="ts">
import store from "@/store"

import Vue from 'vue';
import ScheduleTable from '../components/ScheduleTable.vue';
import Component from 'vue-class-component';
import { ISchedule }  from "@/interfaces";
import * as api from '@/api';


export default Vue.extend({
  components: {
    ScheduleTable,
  },

  data(){
    return {
      schedule : {}
    }
  },
  methods: {
    getSchedule : async function () {
      this.schedule = await api.getScheduleById( this.$route.params.id );
    }
  },
  async created(){
    await this.getSchedule();
  }

});
</script>

1 Ответ

0 голосов
/ 14 октября 2019

Спасибо Phill за помощь. Я не прав в 

<schedule-table
    v-if = "schedule.length > 0"
    :exercises="schedule.exercises"
/>

schedule это не массив, это объект. Лучше использовать что-то вроде этого

object.entries(schedule).length != 0

Подробнее о проверке объектов на пустоту здесь

...