VUE: How to prevent next click with delay?-CodePudding

How to after click prevent next click with 600ms delay? I want "disable" all this a tags for 600ms if I click on any of them. Im a little lost, thanks.

VUE

  <ul>
    <li v-for="item in navigation" :key="item" :title="item.name">
      <router-link :to="item.path" @click="delay()">{{ item.name }}</router-link>
    </li>
  </ul>

delay()

  methods: {
    delay() {
      this.event.preventDefault();
    }
  }

EDIT so i did some changes. I Want make this:

After the button is clicked, each button will get attribute DISABLED for 600ms, then it will disappear and the button will work again. Do not count the router into this timer. I tried something like this, but the button is permanently disabled

<ul>
  <li v-for="item in navigation" :key="item" :title="item.name">
    <button type="button" disabled="false" @click="delay(item.path)">{{ item.name }}</button>
  </li>
</ul>

method

methods: {
  delay(to) {
    this.$router.push(to);
    setTimeout(() => this.disabled = true, 600)
  },
},

CodePudding user response：

My suggestion is to use the setTimeout to disable/enable the link, like this:

<a :disabled="!linkEnabled" href="javascript:void(0)" @click="delay(item.path)">{{ item.name }}</a>

then in your function:

delay(to) {
    this.linkEnable = false;
    this.$router.push(to);
    setTimeout(() => this.linkEnable = true, 600)
}

CodePudding user response：

You can create router and use beforeEach to leasten router change and wait form some time

const routes = [{
    path: "/login",
    name: "Login Component",
    component: LoginComponent
}]
const router = new createRouter({
    history: createWebHistory(),
    routes,
});

router.beforeEach((to, from, next) => {
    // wait how mach you want then next('to your route')
}


export default router;

For more Vue Router