如何在 Vue+typescript 中渲染之前等待组件中的数据答案

【问题标题】：How to wait for data in component before rendering in Vue+typescript如何在 Vue+typescript 中渲染之前等待组件中的数据
【发布时间】：2020-02-11 07:38:32
【问题描述】：

在第一个组件中，我使用路由器打开新页面
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 从异步函数获取之前渲染。如何解决这个问题呢？是的，我读过this question，但我不明白如何存储和返回来自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>

【问题讨论】：

您的 v-if 应该类似于 v-if="Object.keys(schedule).length"。除此之外，为什么即使您还没有数据，渲染组件也会出现问题？像你那样放一个 v-if 对我来说看起来不错。
@Phil 如果组件为空，则其中的方法将出现错误。这个组件应该只显示数据
@Phil 你说得对，我不应该延长对象的方法。如果使用Object.entries(schedule).length != 0 就可以了

标签： typescript vue.js vue-router

【解决方案1】：

感谢菲尔的帮助。我错了

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

schedule 不是数组，它是对象。最好使用这样的东西

object.entries(schedule).length != 0

More info about testing objects for emptiness here

【讨论】：