在Vue表中填充Firebase数据

import firebase from 'firebase/app';
import 'firebase/database';

// 初始化Firebase项目
const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  databaseURL: 'YOUR_DATABASE_URL',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
  appId: 'YOUR_APP_ID'
};

firebase.initializeApp(firebaseConfig);

export default {
  data() {
    return {
      firebaseData: []
    };
  },
  // ...
}

export default {
  // ...
  created() {
    // 获取Firebase数据
    firebase.database().ref('your_data_path').once('value')
      .then(snapshot => {
        // 将数据填充到数据属性中
        this.firebaseData = snapshot.val();
      })
      .catch(error => {
        console.log('Error fetching Firebase data:', error);
      });
  }
}

<template>
  <table>
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <!-- ... -->
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in firebaseData" :key="item.id">
        <td>{{ item.column1 }}</td>
        <td>{{ item.column2 }}</td>
        <!-- ... -->
      </tr>
    </tbody>
  </table>
</template>