Vue/Vuetify：為什么我會收到一個 ReferenceError：變量未定義？

Question

我正在 Vuetify 中創建一個 web 應用程序的客戶端，並有一個 node.js 服務器，上面有一些數據。 在頁面上，我通過擴展面板顯示了詳細信息，如下所示：

  <v-expansion-panel-content>
    <p>Total Computers Online: {{card.comps}}</p>
    <p>Total Users On Computers(Online and in Person): {{card.users}}</p>
  </v-expansion-panel-content>

在我的數據中，卡片中的信息來自於這個樣子

 data() {
  return {
      makEosComputer: 0,
      makEosUserTotal: 0,
      makArchComputer: 0,
      makArchUserTotal: 0,
      makDataComputer: 0,
      makDataUserTotal: 0,
      cards: [
        {title: 'Eos Lab', comps: makEosComputer, users: makEosUserTotal},
        {title: 'Arch Lab', comps: makArchComputer, users: makArchUserTotal},
        {title: 'Data Comm Lab', comps: makDataComputer, users: makDataUserTotal}
      ],
  }
  },

所有以“mak”開頭的變量都在下面的方法中從 node.js 服務器中提取數據，並將該數據放入相應的變量中。 然而，當我嘗試運行它時，我得到“ReferenceError: makeEosComputer is not defined”。 知道為什么會這樣嗎？

Answer 1

變量需要事先聲明（不在同一個對象中）：

export default {
  data() {
    const makEosComputer = 0
    const makEosUserTotal = 0
    const makArchComputer = 0
    const makArchUserTotal = 0
    const makDataComputer = 0
    const makDataUserTotal = 0

    return {
      makEosComputer,
      makEosUserTotal,
      makArchComputer,
      makArchUserTotal,
      makDataComputer,
      makDataUserTotal,
      cards: [
        {title: 'Eos Lab', comps: makEosComputer, users: makEosUserTotal},
        {title: 'Arch Lab', comps: makArchComputer, users: makArchUserTotal},
        {title: 'Data Comm Lab', comps: makDataComputer, users: makDataUserTotal}
      ],
    }
  }
}