Home » vue » Vue.js component only updating after browser page refresh

Vue.js component only updating after browser page refresh

Posted by: admin November 26, 2021 Leave a comment

Questions:

So I am still quite new to Vue.js or any reactive framework for that matter.

I have a component that I need to have update whenever a change is made. The idea is that it is taking a balance from a specific login.

<li :key="balance">Balance {{ balance }}</li>
data() {
    return {
      games: [],
      balance: '101',
      error: ''
    }
}

async created() {
    try{
      this.balance = await WalletService.getBalance();
    } catch(err){
      console.log(err.message);
    }
  }

From my own debugging, it looks like the created() function is not being called after my router.push() when the user logs in. How can I ensure that created() is called after router.push

Answers:

Remove the async keyword from created().

Although lifecycle methods can perform asynchronous code, the lifecycle itself is synchronous.