在获取数据之前Vue未定义的数据

Question

我对某些数据有疑问。 当我加载仪表板时，出现了无法读取未定义数量的错误。 当我重新加载页面时，它可以正常工作。 所以这是我登录数据不起作用的地方。 但在重新加载后，它应该如何工作。

我尝试在两个组件中的图表之前使用v-if，并尝试定义一个对象并将其填充到图表组件中。然后说v-if。没有任何效果。有人可以帮忙吗？

我有3个组成部分

1. 登录（成功登录组件会推送到仪表板）
2. 仪表板（带有导入图表的组件）
3. 图表（这是生成的图表）

登录：这里是我登录并推送至仪表板的路径

<template>
  <button @onclick="login()"> Login </button>
</template>
<script>
  heres the login functions that initialize the session i fill with 
  user data.
</script>

仪表板：在这里，我要用所需的数据填充会话。

<template>
  <p v-if="company.thirtydayScore"> {{company.thirtydaysscore}} </p>
  <chart> </chart>
</template>
<script>
 data(){
   company{
     thirtydaysScore: null
     amount: null and so on
   }
 },
 async beforeMount () {
  await this.fetchData()
  await this.$eventHub.$emit('runToday')
 }
 methods: {
   fetchData(){
     heres api call and fetching of data
     this.company = response.data
     this.$session.set('data', this.company)
   }
 }
</script>

1. 图表

    <template>
     <myChart> </myChart>
    </template>
    <script>
     data(){
      company{
         thirtydaysScore: null
         amount: null and so on
      }
    },
    async beforeMount () {
     var self = this
     await this.$eventHub.on('runToday'){
       self.fillData()
      }
    }
    methods: {
      fillData(){
        here do i fill the data i use in charts from this.$session.get('data')
      }
    }
    </script>
   

错误图片

登录hastebin：https://hastebin.com/imeqaxevim.xml

仪表板hastebin：https://hastebin.com/ixuyiroyuy.xml

图表hastebin：https://hastebin.com/iheqiditiy.xml

Answer 1

我不确定我的问题是否完全相同，但是我在使用vee-validate时遇到了很多错误。似乎在初始化数据和组件之间存在不匹配的情况。可能会有更好的解决方案，但是我总是使用v-if = "company && company.amount"非常务实地解决这些错误。