Home

Code

<template> 
     <section>
     <div v-for="name in names">{{name}}</div>
     </section>
 </template>
<script>
import axios from 'axios'
export default {      
    async data() {
    const { data } = await axios.get('https://test-b4bb7.firebaseio.com/.json')
    console.log(data.names)    
    return { 
      names : data.names
   }
  },
}
</script>

Console.log:

nuxt:render Data fetching /: 2ms +26ms
[ { email: ‘kppp37@gmail.com’,
name: ‘kateryna’,
phone: 888888,
problem: ‘problem’ },
{ email: ‘outrod120@gmail.com’,
name: ‘dmytro’,
phone: 888999,
problem: ‘problem2’ } ]

Data I get from firebase. Data console log prints information about data, but data in template is empty

return { 
      names : data.names
   }  

<div v-for="name in names">{{name}}</div>

is empty…why?
If I simply add code:

data() {
      return { names : 
       [{ email: 'kppp35@gmail.com',
         name: 'kateryna',
         phone: 888888,
         problem: 'kukareku' } ,
        { email: 'kppp35@gmail.com',
         name: 'kateryna',
         phone: 888888,
         problem: 'kukareku' }] 
    }
    }, 

all my template fill real data…
Why in async variant returns data is empty? where problem is?
In console:
[Vue warn]: Property or method "names" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.