For a project using Vuelidate, I have set up a timeout for validation when a user types something. While I achieved success using mixins, I wanted to adhere to good coding practices by creating a Vue directive without globally registering it, and utilizing it in specific components.
To achieve this, I created an external file named directives/delayTouch.js. Initially, I attempted to export only a const using export const, but Vue required me to use export default instead.
const delayTouch = {
inserted ($v) {
const touchMap = new WeakMap()
$v.$reset()
if (touchMap.has($v)) {
clearTimeout(touchMap.get($v))
}
touchMap.set($v, setTimeout($v.$touch, 1000))
}
}
export default delayTouch
Subsequently, I imported this directive into my component:
<template>
<TextField
v-delay-touch="$v.data.name"
:v="$v.data.name"
v-model.trim="$v.data.name.$model"
id="name"
label="Nome da campanha"
/>
</template>
<script>
import delayTouch from '@/directives/delayTouch'
export default {
directives: { delayTouch }
}
</script>
Despite correctly passing the HTML in the param ($v), I am encountering the error message $v.reset is not a function. What could be the reason behind this issue?