1

I am creating a front end in Vuetify and have a nodejs server with some data on it. When the page is created I run the async functions to fetch the data from the server and store it in the variables. I have a skeleton loader set up so the data has time to load, the problem is that when I store the data in the variables, it will not show up. My data looks like this,

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

and then I have an async function that grabs the data like this,

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

the async methods are called in the created() section. Then in the html I attempt to put these values on screen like so.

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

If I change the declaration of the variable to makEosComputer: 10, then the 10 wont show up on screen, but if in cards array I change the comps: 10 then that will display. Why wont my variables show up on screen?

  • you are filling makEosComputer, while you are showing data from card ?? ` .then(data => { this.makEosComputer = data this.loading = false })` where is cards data ?? or it's from vuex? – Jehad Ahmad Jaghoub Jul 23 '21 at 18:21

1 Answers1

0

Regarding why it won't render, the return of data() it's what set pros so you can do this.makEosComputer, so until that doesn't return that pro doest exist, thus you can't use it in your def of cards

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

then {{ cards[0].comps }} will display 10

Juan Eizmendi
  • 984
  • 6
  • 10