为什么使用 Vue.js 时，来自 Firebase 实时数据库的数据仅在控制台中呈现，而不在页面上呈现？

Question

When I try to render a value stored in my Firebase Realtime Database, I can see it when I console.log, but it won't render on the page while using the {{ exams.name }} syntax in Vue. When I setup the same thing, but using Firestore, I was able to render it onto the page.

I am using this code in my main dashboard view:

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

I don't know if you pasted your code without some part of the component, but this part should be inside a method and assign the value to this.desired_state_value like so:

  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);
    }
}
}