VueJS + Firebase 使用 Firebase 绑定

Posted 2023-02-22

【中文标题】VueJS + Firebase 使用 Firebase 绑定

【英文标题】：VueJS + Firebase Using the Firebase Binding

【发布时间】：2020-10-21 03:46:06

【问题描述】：

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

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

【参考方案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"

【讨论】：

非常感谢回复，Firebase没有自带绑定吗？我在 firebase 绑定中定义名称。 firebase: names: namesRef 查看这个工作示例，他们正在按照我尝试的方式从用户那里迭代数组。 codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/…

我看到了，但没有看到需要。我的项目只是从配置中导出 firebase 或数据库，然后根据需要在代码中构建参考。更简单，IMO。我编辑来说明。