How do i prevent duplicate calling of asyncData in Nuxt.js

Question

nuxt.js v2.15.3.

I have used asyncData in some pages and these pages accessing by nuxt-link.
but if continuous clicking of nuxt-link (clicking interval less 1000ms), asyncData function is continuous called.
is there prevent this situation? Do i use fetch instead asyncData?

<!-- some component -->
<nuxt-link :to="`/some-page`"></nuxt-link>

// some page component 
async asyncData({ $axios ) {
  // Called as much as clicking.
  const resp = $axios.get(....)

  return { data :resp.data }
}

Perhaps disable the NuxtLink on click? Just like explained [here](https://stackoverflow.com/questions/54662327/vue-js-how-to-prevent-button-clicked-on-two-times-continuously) — Dharmaraj, Jul 01 '21 at 05:44

score 0 · Answer 1 · answered Jul 01 '21 at 07:04

You can disable the link as soon as clicked:

// some component
<nuxt-link to="/some-page" @click="onLinkClick"></nuxt-link>

data() {
  return {
    linkClicked: false,
  }
}

onLinkClick(e) {
  e.preventDefault();
  
  if (linkClicked) return;

  this.linkClicked = true;
}

Of course, this solution is assuming you only want to click the link once

score 0 · Answer 2 · answered Jul 01 '21 at 07:17

fetch() may indeed help since it will move out of the page and remove the blocking effect of it.
You can also implement a debounce method or look to disable <nuxt-link> is a specific condition is met. Check my answer here for debounce: https://stackoverflow.com/a/67209352/8816585

Also, feel free to add some CSS to the button (if you want to stick with asyncData), with something like @null's solution

<nuxt-link to="/some-page" 
  @click="onLinkClick" 
  :disabled="linkClicked"
>
  My fancy link
</nuxt-link>

How do i prevent duplicate calling of asyncData in Nuxt.js

2 Answers2