时间戳

首页 > 解决方案 > 获取数据之前的Vue未定义数据

javascript - 获取数据之前的Vue未定义数据

问题描述

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

我在两个组件的图表之前都尝试过使用 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

标签： javascriptvue.jsvue-componentvue-router

解决方案

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

推荐阅读