Как решить ошибку при подключении Firebase + vuejs (nuxtjs)?

Question

[myskypesla]

Использую nuxtjs для нового проекта и решил вставить значения, шаблон такой:

<template>
  <div v-for="slide in slides">
    <div>{{ slide.text }}</div>
    <div>{{ slide.title }}</div>
  </div>
</template>

подключение и получение данных реализовано по руководству nuxtjs

import axios from 'axios'

  export default {
    async data () {
      let { data } = await axios.get('https://ggproduction-f0b98.firebaseio.com/slides.json')
      return { slides: data }
    }
  }

Ошибка 1:

[Vue warn]: data functions should return an object: https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function 
(found in <Projects> at C:\Users\user\Desktop\my-project\pages\projects.vue)

Ошибка 2:

[Vue warn]: Property or method "slides" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in <Projects> at C:\Users\user\Desktop\my-project\pages\projects.vue)

Answer 1

[myskypesla]

в моём примере нужно было поменять только async data... на async asyncData...

Answer 2

[wostex]

В Nuxt.js метод называется asyncData, а вы делаете просто 'data'.

data - должна быть в компоненте функцией, результаты asyncData с ней в итоге объединятся.

data: function() {
   return {
      notAsyncData: 'hello'
      ....
   }
}

Comments

[myskypesla]

wostex В документации так написано. А подскажи, как в моём примере исправить?

[myskypesla]

wostex сделал, в моём примере нужно было поменять только async data... на async asyncData...

[wostex]

myskypesla: да, все верно. Теперь работает?

[myskypesla]

wostex: Да! Спасибо, иногда хорошо, пообщаться чтобы понять куда двигаться. Разная документация на русском и на eng, видимо не успевают обновлять. Подскажи пожалуйста по данному вопросу, может быть сталкивался?