Nuxt•5mo ago

Directive v-debounce

Hello! I have been trying for a while to create a custom directive debounce.ts in Nuxt without success. The idea is to have an input like this:

<input
  v-model="model"
  v-debounce="500"
  @input="$emit('fieldUpdated')"
/>

<input
  v-model="model"
  v-debounce="500"
  @input="$emit('fieldUpdated')"
/>

And have my variable "model" updated only after 500ms. Have you ever done something like this? PS: I know there are "easy" ways to do this, especially with lodash, but I don't want to add such a large library just for that.

4 Replies

yashwp•5mo ago

Easy way, you can use lib, useDebouce in vueuse.

MolakDulOP•5mo ago

I don't want to use a lib + there is no directive implementation in VueUse :/

yashwp•5mo ago

https://codecourse.com/articles/debounce-input-in-vue-3

How to Debounce Input in Vue 3

If you have (or want to implement) forms that autosave as a user types, there's a really important consideration to make when making requests to an API — the amount of requests you send.

MolakDulOP•5mo ago

Lmao the first line of the tutorial is : First, install the lodash debounce package ☠️ And they are using watcher not directives

Gaming

Programming

Directive v-debounce