為什么使用 Vue.js 時，來自 Firebase 實時數據庫的數據僅在控制台中呈現，而不在頁面上呈現？

Question

當我嘗試渲染存儲在我的 Firebase 實時數據庫中的值時，我可以在 console.log 中看到它，但在 Vue 中使用 {{ Exams.name }} 語法時它不會在頁面上渲染。 當我設置相同的東西但使用 Firestore 時，我能夠將它呈現到頁面上。

我在我的主儀表板視圖中使用此代碼：

import firebase from '@/firebase/firebaseConfig.js'
import db from '@/firebase/firebaseConfig.js'
import { database } from '@/firebase/firebaseConfig.js'

export default  {

  data() {
    return {
      checkpointReward: {},
      subscribersGained: {},
      ordersRecevied: {},
      salesBarSession: {},
      supportTracker: {},
      productsOrder: {},
      salesRadar: {},
      totalStudents: {},
      examRef: {},
      exams: {},
      studentName: {},
      students: {},
      testingData: {},
      analyticsData,
      dispatchedOrders: []
  }
},

   // Initialize Firebase
    const examRef = database.ref('exams');
        
      examRef.on('value', gotData, errData);

        function gotData(data) {
          const exams = data.val();
          const studentData = exams.name;
          console.log(exams.name);
        }

        function errData(err) {
          console.lof("Error!");
          console.log(err);
        }

Answer 1

我不知道您是否在沒有組件的某些部分的情況下粘貼了代碼，但這部分應該在方法內並將值分配給 this.desired_state_value ，如下所示：

  export default  {

      data() {
        return {
         checkpointReward: {},
         subscribersGained: {},
         ordersRecevied: {},
         salesBarSession: {},
         supportTracker: {},
         productsOrder: {},
         salesRadar: {},
         totalStudents: {},
         examRef: {},


        [...]
     },
  methods: {
     getExams(){
        // Initialize Firebase
        this.examRef = database.ref('exams');
    
        this.examRef.on('value', gotData, errData);

        function gotData(data) {
           const exams = data.val();
           const studentData = exams.name;
           console.log(exams.name);
    }

      function errData(err) {
         console.lof("Error!");
         console.log(err);
    }
}
}