CODEWITHSUNDEEP
javascriptvue.jsvue-componentvue-router
Anders Bootsmann Larsen
Anders Bootsmann Larsen

Reputation: 341

Vue undefined data before data fetched

I have a problem with some data. When I load my dashboard it gives me the error that it cant read amount of undefined. When i fresh reload the page it works. So it is the place when i've logged in the data doesn't work. but on reload it works how it should.

I have tried with v-if before the chart in both components and trying to define an object and fill it on the chart component. and then saying v-if. nothing works. can anyone help?

I have 3 components

  1. Login (component pushing to dashboard on succesfull login)
  2. Dashboard (component with imported charts)
  3. Charts (here is the charts generated)

login: heres where i login and push route to dashboard 

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

dashboard: and here do i fill the session with the data i want. 

<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. chart

     <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>

Error image

error

login hastebin: https://hastebin.com/imeqaxevim.xml

dashboard hastebin: https://hastebin.com/ixuyiroyuy.xml

chart hastebin: https://hastebin.com/iheqiditiy.xml

Upvotes: 2

Views: 1292

Answers (1)

Imre_G
Imre_G

Reputation: 2535

I am not sure if my problem is exactly the same, but I have encountered this error with vee-validate a lot. Seems something with a mismatch between initiating the data and the component. There probably will be a better solution, but I always solve these errors very pragmatically with v-if = "company && company.amount".

Upvotes: 1

Related Questions