Как составить список предметов из firebase в VueJS 2?

Question

Github https://github.com/tenzan/vue-fruits/tree/29d9d612c8801388f06a01541bf93ffdb7712f9f

App.vue

<template>
<FruitList></FruitList>
</template>

<script>

import FruitList from './components/FruitList'

export default {
  name: 'App',
  components: {
      FruitList
  }
}
</script>

FruitList.vue

<template>
<div v-for="fruit in fruits">{{ fruit.name }}</div>
</template>

<script>
export default {
  name: "FruitList"
};
</script>

Сторона Firebase выглядит следующим образом:

Ошибка:

Failed to compile.

./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-0b422dd2","hasScoped":false,"optionsId":"0","buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/FruitList.vue
(Emitted value instead of an instance of Error) 
  Error compiling template:

  <div v-for="fruit in fruits">{{ fruit.name }}</div>

  - Cannot use v-for on stateful component root element because it renders multiple elements.

 @ ./src/components/FruitList.vue 6:0-326
 @ ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"/Users/askar/work/vue/vue-fruits/node_modules/.cache/cache-loader"}!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client/index.js (webpack)/hot/dev-server.js ./src/main.js

ОБНОВЛЕНИЕ 1

FruitList.vue обновлен до

<template>
<div>
  <div v-for="fruit in fruits">{{ fruit.name }}</div>
</div>
</template>

<script>
export default {
  name: "FruitList"
};
</script>

На этот раз выдается предупреждение :

[Vue warn]: Property or method "fruits" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <FruitList> at src/components/FruitList.vue
       <App> at src/App.vue
         <Root>

Answer 1

Необходимо сделать fruits реактивным, указав его в параметре data компонента:

<script>
export default {
  name: "FruitList",

  data() {
    return {
      fruits: []
    }
  }
};
</script>

и заполните fruits запросом из Firebase.

Запрос Firebase из приложения vue.js довольно длительный процесс, чтобы описать его в SO-ответе ... Я скорее укажу вам хороший урок: https://www.youtube.com/watch?v=FXY1UyQfSFw&list=PL55RiY5tL51qxUbODJG9cgrsVd7ZHbPrt. Начните смотреть видео № 13 (и более конкретно видео № 17)

---

Обновление:

Это еще один учебник, основанный на библиотеке vuefire :

https://appdividend.com/2018/04/21/vue-firebase-crud-example/

См. Шаг 10 для получения данных из RTDB