使用Firebase绑定的VueJS + Firebase

Question

我正在尝试使用Firebase学习Vue，并且我已经学习了一些教程，但是我遇到了一个我似乎找不到的错误。它与firebase绑定在一起。

我有一个firebase配置文件：

import {initializeApp} from 'firebase'

const app =  initializeApp({
  apiKey: "hidden",
  authDomain: "hidden",
  databaseURL: "hidden",
  projectId: "hidden",
  storageBucket: "hidden",
  messagingSenderId: "hidden",
  appId: "hidden"
})

export const db = app.database();
export const namesRef = db.ref('names');

我正在导出namesRef，当我向它添加内容时，它可以工作，但当我试图遍历它时，它就不起作用了。

<template>
  <div>
    <div class="row">
      <label>Name:</label>
      <input type="text" v-model="name">
      <button @click="submitName()">add</button>
    </div>
    <div class="row">
      <h1>Bottles</h1>
      <ul>
        <li v-for="name in names" :key="name.key">
          {{name}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {namesRef} from '@/firebase'
export default {
  data() {
    return {
      name: '',
    }
  },
  firebase: {
    names: namesRef
  },
  methods: {
    submitName(){
      namesRef.push({name: this.name})
    }
  },
}
</script>

我关注的几个教程表明，您可以使用下面这样的firebase绑定……

firebase: {
 names: namesRef
},

我认为我应该能够遍历名称，但我得到一个错误"Vue warn:属性或方法“名称”未在实例上定义，但在呈现过程中被引用。请确保此属性是响应式的，无论是在data选项中，还是通过初始化属性来实现基于类的组件。“

我在这项工作中遗漏了什么？

Answer 1

未在vue上定义names。在data方法中定义它。一旦完成，要意识到firebase ref不是类似数组的；所以迭代没有意义。它必须用on()方法“监听”……

import {db} from '@/firebase'

data() {
  return {
    names: null,
  }
},
mounted () {
  db.ref('names').on('value', dataSnapshot => {
    this.names = dataSnapshot.val()
  })
},

这样，标记就可以迭代v-for="name in names"