Vue inline event handlers should not be redundantly used
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 | Compliant Code Example | ||
|---|---|---|---|
| 1 | <template> | 1 | <template> |
| 2 | <div @click="handleClick($event)"> | 2 | <div @click="handleClick"> |
| 3 | Hello | 3 | Hello |
| 4 | </div> | 4 | </div> |
| 5 | </template> | 5 | </template> |
<template> <div @click="handleClick($event)"> Hello </div></template><template> <div @click="handleClick"> Hello </div></template>This rule was introduced in DeepScan 1.40.0.