Bacancy Technology

Bacancy Technology represents the connected world, offering innovative and customer-centric information technology experiences, enabling Enterprises, Associates and the Society to Rise™.

12+

Countries where we have happy customers

1050+

Agile enabled employees

World wide offices

12+

Years of Experience

Agile Coaches

Certified Scrum Masters

1000+

Clients projects

1458

Happy customers

Vue

May 31, 2023

Vue Await for Watch

Certainly, it doesn’t make much sense to make your watchers async because the data you need to process has already arrived.

However, you can still call other async functions within the watcher. Async functions are simply functions that return a promise. Therefore, you can use the .then() method to execute some actions once the promise is resolved, like this:

someRandomValue(newValue, oldValue) { 
    triggerAsyncAction()
        .then(response => this.randomAction)
        .catch(error => console.log(error))
}

But instead of doing your async tasks within the watcher, performing them in the “randomAction” method might be better. You can call this method inside the watcher and execute the async tasks there.

watch:{ 
    someRandomValue(newValue, oldValue) { 
        this.randomAction()
    }
},
methods:{
    async randomAction(){
        await doSomeAsyncStuff() // use await here
        // then do something else
    }
}