Vue inline event handlers should not be redundantly used

• VUE_REDUNDANT_INLINE_EVENT_HANDLER
• Code Quality
• Low
• vue

This rule applies when event handling code is unnecessarily wrapped as an inline handler function.

Vue wraps event handling code as an inline handler if the code is not a variable or property reference expression. In an inline handler, the special $event variable is used to access the original DOM event passed to the handler.

An inline handler becomes redundant if the whole handler code is a function call that passes just the $event variable (e.g. @click="handleClick($event)"). It is equivalent to using the function itself as the handler (e.g. @click="handleClick"). For code readability and maintainability, it is recommended to use more succinct code not incurring the additional function call.

Noncompliant Code Example

<template>
  <div @click="handleClick($event)">
    Hello
  </div>
</template>

Compliant Code Example

<template>
  <div @click="handleClick">
    Hello
  </div>
</template>

Version

This rule was introduced in DeepScan 1.40.0.

See

• v-on directive

• Event Handling