capture multiple events in vue js, syntax?

Question

bear with me, you don't need to watch the video, nor read the github project, just for completeness:

from the laracasts about vue js and form submit

 <form @submit.prevent="doSubmit()"  @keydown="form.errors.clear($event.target.name)">

this will clear the error of an element in case of "keydown" event. Now this won't work for <select> as users usually click or change for sure

so what I want to do is something like

<form @submit.prevent="doSubmit()"  @keydown@change="form.errors.clear($event.target.name)">

but vue js does not seem to have syntax to do the same thing for multiple events

so only solution is:

 <form @submit.prevent="doSubmit()" @change="form.errors.clear($event.target.name)"  @keydown="form.errors.clear($event.target.name)">

I repeat the question:

how to do the same thing for 2 different events?

@scroll@click any 2 events

the actual solution to my problem is secondary

well DRY: en.wikipedia.org/wiki/Don%27t_repeat_yourself just imagine you have 5 events doing the same thing. To me its a smell. If I have to reread my code, I have to reread all event handlers to see if they are really exactly the same. Because if there is a small little difference there, good luck man. If it is the same, it should be called the same e.g. @click@change=".." that way you are sure at a glance it is the same, if it is not the same, it should be called like in the last example — Toskan
– Toskan, Commented Apr 23, 2018 at 2:30
this issue was discussed in github.com/vuejs/vue/issues/6457. looks like there isn't a solution for this yet. — Jacob Goh
– Jacob Goh, Commented Apr 23, 2018 at 2:35
@Ohgodwhy i cite: Violations of DRY are typically referred to as WET solutions, which is commonly taken to stand for either "write everything twice", "we enjoy typing" or "waste everyone's time" yes, that is exactly WET — Toskan
– Toskan, Commented Apr 23, 2018 at 2:43

Shabeer Mk · Accepted Answer · 2021-07-26 08:52:24Z

1

Instead of

@keydown@change="form.errors.clear($event.target.name)"

use

@input="form.errors.clear($event.target.name)"

It will work for any input event occurs.

edited Jul 26, 2021 at 8:52

answered Jan 9, 2019 at 5:19

Shabeer Mk

112 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

fogx Over a year ago

this does not answer the question. OP does not want "any" input events to trigger the method, he/she wants two specific events to cause a trigger.

Collectives™ on Stack Overflow

capture multiple events in vue js, syntax?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related