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:

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

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

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

🔧 Options ​

{
  "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) ​

["method", "inline"] ​

"inline-function" ​

"inline" ​

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

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

👫 Related Rules ​

• vue/v-on-style
• vue/v-on-event-hyphenation

📚 Further Reading ​

• Guide - Inline Handlers
• Guide - Method Handlers

🚀 Version ​

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

🔍 Implementation ​

• Rule source
• Test source