eslint-plugin-vue

Appearance

vue/v-on-handler-style ​

enforce writing style for handlers in v-on directives

  • 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

📖 Rule Details ​

This rule aims to enforce a consistent style in v-on event handlers:

vue
<!-- Method handler: -->
<button v-on:click="handler" />

<!-- Inline handler: -->
<button v-on:click="handler()" />

<!-- Inline function: -->
<button v-on:click="() => handler()" />
Now loading...

🔧 Options ​

json
{
  "vue/v-on-handler-style": ["error",
    ["method", "inline-function"], // ["method", "inline-function"] | ["method", "inline"] | "inline-function" | "inline"
    {
      "ignoreIncludesComment": false
    }
  ]
}
  • First option ... Specifies the name of an allowed style. Default is ["method", "inline-function"].
    • ["method", "inline-function"] ... Allow handlers by method binding. e.g. v-on:click="handler". Allow inline functions where method handlers cannot be used. e.g. v-on:click="() => handler(listItem)".
    • ["method", "inline"] ... Allow handlers by method binding. e.g. v-on:click="handler". Allow inline handlers where method handlers cannot be used. e.g. v-on:click="handler(listItem)".
    • "inline-function" ... Allow inline functions. e.g. v-on:click="() => handler()"
    • "inline" ... Allow inline handlers. e.g. v-on:click="handler()"
  • Second option
    • ignoreIncludesComment ... If true, do not report inline handlers or inline functions containing comments, even if the preferred style is "method". Default is false.

["method", "inline-function"] (Default) ​

Now loading...

["method", "inline"] ​

Now loading...

"inline-function" ​

Now loading...

"inline" ​

Now loading...

["method", "inline-function"], { "ignoreIncludesComment": true } ​

Now loading...

["method", "inline"], { "ignoreIncludesComment": true } ​

Now loading...

📚 Further Reading ​

🚀 Version ​

This rule was introduced in eslint-plugin-vue v9.7.0

🔍 Implementation ​