Vue, basing link in href off of the method completing first

Question

I'm trying to figure out how to reconcile this, but I have a button in Vue calling a function, which works, but it's taking more than a few seconds to complete and the href link to the next page happens first about half the time.

Is there a way to make this so that the button called method has to get a 200 success back in order for the href link to be triggered?

<button @click="changeStatus(dateEvent)" type="button" class=" taskButton btn-default">
    <a v-bind:href="'/task/' + dateEvent.taskt_id + '/progress'" style="color:white;">Accept Task</a>
</button>


methods: {
  changeStatus: function(dateEvent) {
    //console.log(dateEvent.status, dateEvent.taskt_id)
    let data = {
        id: dateEvent.taskt_id,
        status: 'P'
    };
}

Answer 1

You need programmatic navigation (vue router if you want) and async/await:

You could do it without the router in vanilla js as well:

methods: {
  async changeStatus(dateEvent) {
    await this.myAsyncFunction(); // your function that takes two seconds to complete
    let data = {
        id: dateEvent.task_id,
        status: 'P'
    };
    var route = '/task/' + dateEvent.task_id + '/progress'"
    this.$router.push(route);
  }
}

<button @click="changeStatus(dateEvent)" type="button" class=" taskButton btn-default">
    <a style="color:white;">Accept Task</a>
</button>