N
Nuxt•2w ago
MolakDul

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
yashwp•2w ago
Easy way, you can use lib, useDebouce in vueuse.
MolakDul
MolakDul•2w ago
I don't want to use a lib + there is no directive implementation in VueUse :/
yashwp
yashwp•2w 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.
MolakDul
MolakDul•2w ago
Lmao the first line of the tutorial is : First, install the lodash debounce package ☠️ And they are using watcher not directives
Want results from more Discord servers?
Add your server
More Posts
Best way to cache a pre-rendered SSG project?Hello! Currently I am working in a project that aims to prerender using data from a Database around I get an error connected with nuxtui-pro that text-foreground class doesn' t exist in module[2:17:00 AM] ERROR Pre-transform error: [postcss] /node_modules/.pnpm/@nuxt+ui-pro@1.3.1_nuxt@3.11NuxtUI , keep Horizontal Nav Bar item active for multiple routesLet's take for example I have a horizontal route in a shared layout, and I have a route names `docs`nuxt project was working fine 1 month ago now fails on `pnpm run build` prerenderI'm getting many > Error: [500] without more information on the cause or error causing this. The buQuestion about netlify deploymentHey guys… just curious why nuxt docs for deploying to netlify say netlify will automatically set theJsonTokenOke so im trying to implement a video player that can only be accessed when having a jsonwebtoken cApp failing in productionHi! Got these errors in the pm2 logs while going on the website but I can't figure out what's wrong.useFetch status is success for a split second before changing to pending```html <template> <main> <p>Index page</p> <NuxtLink href="/about">Go About</Nuexpose module's utility functionI've developed a Nuxt module that uses an internal utility function. I'd like to make this utility fNovel editorI want to use novel editor in nuxt 3 How can I use it?