[SOLVED] vue function does not run after mounted()

vue function does not run after mounted()

A memory-game I am creating, I would like to start immediately after the page is loaded.

To start I need to createDeck() and showCards()

I tried several things in the export default {} like:

   created(){
     this.createDeck(),
     this.createShowCards()
   },

and

    mounted() {
      this.fetchCards(),    // also need to fetch the cards, this works ok...
      this.createDeck(),
      this.createShowCards()
      console.log('component mounted')
    },

I can get the game working when calling the startfunctions with a start button:

 <div class="text-center">
   <button  @click="startGame()" v-if="Object.keys(cards).length != 0">Start game</button>
 </div>

Can anyone explain to me what I am missing? How can I get the "button to be clicked automatically" ?

Solution

Try to wait cards to load:

async mounted() {
  await this.fetchCards()
  this.createDeck()
  this.createShowCards()    
},

and maybe you need to make that function async like

async fetchCards() { await ...}