JavaScript logoJavaScript/
JS-0637

Found invalid `v-on` directivesJS-0637

Major severityMajor
Bug Risk categoryBug Risk
vue

v-on directive is used to listen to DOM events and run some JavaScript when they’re triggered.

v-on directive is invalid when:

  • The directive doesn't have event name.
  • The directive has invalid modifier.
  • The directive doesn't have attribute value and any verb modifiers.

The issue is fixed by providing 'v-on' directives a value or verb modifier like 'stop' or 'prevent'.

Vue provides event modifiers for v-on as follows:

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive

When listening to native DOM events, the method receives the native event as the only argument. If using inline statement, the statement has access to the special $event property i.e, v-on:click="handle('ok', $event)".

Starting in 2.4.0+, v-on also supports binding to an object of event/listener pairs without an argument.

<button @click="doThis"></button> is shorthand of <button v-on:click="doThis"></button>.

Bad Practice

<!-- 'v-on' directives require a value or verb modifier  -->
<div v-on/>
<div v-on:click/>
<div @click/>

<!-- 'v-on' directives don't support the modifier 'aaa' -->
<div v-on:click.aaa="value"/>

<!-- provided value for v-on directive -->
<div v-on="value"/>

<!-- provided value for @click event -->
<div @click="value"/>

<!-- provided valid modifiers for @click event -->
<div @click.left="value"/>
<div @click.prevent/>
<div @click.stop/>

<!-- removed unsupported modifier -->
<div v-on:click="value"/>

References