Vue/Vuetify: why am I getting a ReferenceError: variable is not defined?

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: makEosComputer 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}
      ],
    }
  }
}