Trigger on Vue events

[bobvandevijver]

I cannot seem to get the directive to trigger on Vue events.

I have a component which uses the the input event to update the attached v-model. There are several inputs in there (which actually trigger the debounced function), but I also emit them manually: those do not trigger the debounced function.

My simplified component:

<CustomComponent
            v-model="options"
            v-debounce="refreshDefaults" debounce-events="input"/>

I think this might be due to the addEventListener used, as it binds on the HTML element instead of the Vue component. When using @input on the component to trigger the required function without debounce does work.

[dhershman1]

Hmm, I'm not sure how to approach that, I will look into it and do some research on what I might be missing for this.

[dhershman1]

Sorry work has been a pain as of late and I haven't been able to get around to it just yet, I have not forgotten about this issue I promise.

[dhershman1]

So I've done some digging into this and I don't think I can directly intercept events emitted manually.

you're best bet would be to use the bind and wrap that in a debounce function

IE:

<CustomComponent
            v-model="options"
            v-debounce="refreshDefaults" debounce-events="input"
            @foobar="debounce(doSomething, 400)"
/>

If I am getting what you're asking correctly or not.

[bobvandevijver]

That's too bad to hear... I wonder how the do it in Vue itself, as they can bind to both native and Vue events with the @event syntax.

Anyways, my workaround looks a lot like you proposed:

<CustomComponent
            v-model="options"
            @input="debouncedSelectUpdate"

protected readonly debouncedSelectUpdate: DebounceInstance = debounce(() => {
      this.refreshDefaultSelect();
    }, 300);

For me it is okay to close this issue if you like to, but it might be convenient to add a little note to the documentation about this possible pitfall?

[dhershman1]

That's a good idea, I'll add it onto the documentation and make it so its more of a question to see if anyone else has accomplished it and how they might've.

EDIT: Do you mind checking the development branch and make sure I talk about the issue correctly?

[dhershman1]

v2.5.4 adds caveats section please re open if you feel more needs to be added/done.