Vue调用Realtime Database数据无法显示求助：可添加但无法读取

嘿，我之前也碰到过类似的情况，数据能成功写进数据库但页面死活不渲染，帮你梳理几个大概率的问题和解决办法：

1. 初始化数据类型踩坑了 #

你在data里把objects的初始值设成了空字符串''，但v-for是要遍历数组或者可迭代对象的，字符串根本没法被正确遍历。先把这个改了：

data () {
  return {
    msg: 'Welcome to Your',
    name: '',
    objects: []  // 改成空数组就对了
  }
}

2. 确认Firebase自动绑定是否生效 #

如果你用的是vuefire的自动绑定（就是通过组件里的firebase选项），得确保：

• 已经在项目里正确安装并注册了vuefire（比如在main.js里做了Vue.use(VueFire)）
• objectsref确实指向了Realtime Database里的正确节点，比如firebase.js里的引用应该是类似这样的：

import { ref } from 'firebase/database'
import { db } from './firebase'
export const objectsref = ref(db, 'objects') // 这里的路径要和你存数据的节点对应

3. 手动监听数据变化（兜底方案） #

要是自动绑定还是没反应，不如手动监听数据库的value事件，这样更直观可控：

// 在组件的script里添加mounted钩子
mounted() {
  // 监听数据变化，实时更新页面
  objectsref.on('value', (snapshot) => {
    const rawData = snapshot.val();
    // Firebase返回的是键值对对象，转成数组才能用v-for遍历
    this.objects = rawData ? Object.values(rawData) : [];
  });
}

4. 别忘了检查数据库权限 #

虽然你能写入数据，但也要确保读取权限是开放的（开发阶段可以临时设成公开，上线后再收紧）：

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

先试试第一个修改，把objects改成空数组，这是最常见的原因，很多时候都是初始数据类型不对导致v-for不干活~

内容的提问来源于stack exchange，提问作者Sorana