为什么使用 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);
    }
}
}