Question

我正在使用香草Vue表示没有Vuex也没有Vue-router。 Webpack为我做了它。

我有一个页面（在这里为了清楚起见将其复制），上面有很多控件。有些需要通过async await调用来加载数据。其他人没有。我的问题当然是async之一。

这是基本页面：

<p>My Page</p>
<medications ref="Medications"></medications>

这是它的代码：

export default {
  extends: BaseTest,
  data: {
    ...
  },
  mounted() {
    console.log('Mounted Page - Total Meds:', this.$refs.Medications.Meds.length);
  }
};

这是导致我出现问题async的{{1}}组件：

Medications.vue

运行页面时，<template id="medications-template"> <div class="medications"> ... </div> </template> <script> export default { extends: BaseComponent, name: 'medications', props: { Meds: [] }, data() { return { ... } }, async created() { console.log('Creating a Medications control'); let Meds = await getClinicalList('...', '...'); console.log('Done creating a Medications control - Total Meds:', this.Meds.length); }, mounted() { console.log('Mounted a Medications control - Total Meds:', this.Meds.length); } }; </script>消息如下：

创建药物控制
安装了药物控制-药品总数：0
已安装页面-药品总数：0
完成药物控制的创建-药品总数：59

我假设任何console.log组件都会在外部视图模型/页面执行async事件之前finish加载。

是否有办法在实际页面完成之前确保所有组件都已完成？

如何确保在ViewModel挂载的事件触发器之前，所有异步组件都已加载并准备就绪

0 个答案: