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" ?
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 ...}