vue function does not run after mounted()

Question

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

Is fetchCards() a sync request?

Vucko
– Vucko

2022-08-27 09:33:42 +00:00
Commented Aug 27, 2022 at 9:33 — Vucko
– Vucko, Commented Aug 27, 2022 at 9:33

Nikola Pavicevic · Accepted Answer · 2022-08-27 20:12:18Z

2

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

edited Aug 27, 2022 at 20:12

answered Aug 27, 2022 at 10:08

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nikola Pavicevic Over a year ago

@M.Koops hey mate, can you show your fetchCards function? Maybe you need to make that function async like async fetchCards() { await ...}

M.Koops Over a year ago

Thanks for the help. fetchcards is an async function. The solution suggested above does work fine.

Collectives™ on Stack Overflow

vue function does not run after mounted()

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related