Vue，基于href中的链接关闭首先完成的方法答案

【问题标题】：Vue, basing link in href off of the method completing firstVue，基于href中的链接关闭首先完成的方法
【发布时间】：2020-01-03 22:38:46
【问题描述】：

我试图弄清楚如何协调这一点，但我在 Vue 中有一个按钮调用了一个函数，该函数有效，但需要几秒钟以上才能完成，并且指向下一页的 href 链接首先出现一半的时间。

有没有办法做到这一点，以便调用方法的按钮必须获得 200 成功才能触发 href 链接？

<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'
    };
}

【问题讨论】：

你能把剩下的代码贴出来吗？您可能会在点击时阻止默认，然后在 200 后触发导航

标签： javascript vue.js

【解决方案1】：

你需要编程导航（vue router，如果你愿意的话）和async/await：

without the router in vanilla js 也可以这样做：

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>

【讨论】：