VueJS + Firebase 使用 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 警告]：属性或方法“名称”未在实例上定义，但在渲染期间被引用。确保该属性是响应式，无论是在数据选项中，还是对于基于类的组件，通过初始化属性。”

我在这项工作中缺少什么？

Answer 1

names 没有在 vue 上定义。在数据方法中定义它。完成后，请意识到 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"