Vue/Vuetify - 无法获取要显示的变量

Question

我正在 Vuetify 中创建一个前端，并有一个带有一些数据的 nodejs 服务器。创建页面时，我运行异步函数从服务器获取数据并将其存储在变量中。我设置了一个骨架加载器，所以数据有时间加载，问题是当我将数据存储在变量中时，它不会显示出来。我的数据是这样的，

data() {
  return {
    //holds data coming from server
      loading: false,
      makEosComputer: 0,
      makEosUserTotal: 0,
      makArchComputer: 0,
      cards: [
        {title: 'Eos Lab', os: 'Linux', roomno: 'idk', comps: this.makEosComputer},
        {title: 'Arch Lab', os: 'Linux', roomno: 'idk', comps: this.makArchComputer},
        {title: 'Data Comm Lab', os: 'Linux', roomno: 'idk', comps: this.makDataComputer}
      ],

然后我有一个像这样抓取数据的异步函数，

 methods: {
  async getEosComp() {
    this.loading = true
    collectDataService.getMakEosTotalComp()
    .then(data => {
      this.makEosComputer = data
      this.loading = false
    })
  },

异步方法在 created() 部分中调用。然后在 html 中，我尝试像这样将这些值显示在屏幕上。

   <p>Total Computers Online: {{card.comps}}</p>

如果我将变量的声明更改为 makEosComputer: 10，则 10 不会显示在屏幕上，但如果在卡片数组中我更改了 comps: 10，那么它将显示。为什么我的变量不显示在屏幕上？

Answer 1

关于为什么它不会呈现，data() 的 return 是设置专业人士所以你可以做 this.makEosComputer，所以直到 return该 pro 确实存在，因此您不能在 cards

的定义中使用它

data() {
    return {
        makEosComputer: 10,
        cards: [
            {title: 'Eos Lab', os: 'Linux', roomno: 'idk', comps: null},
        ],
    }
},
mounted() {
    this.cards[0].comps = this.makEosComputer;
}

然后{{ cards[0].comps }}会显示10

Vue/Vuetify - 无法获取要显示的变量

Vue/Vuetify - Cannot get variables to display

javascript

vue.js

vuetify.js