v-on-handler-style.md

pageClass	sidebarDepth	title	description
rule-details	0	vue/v-on-handler-style	enforce writing style for handlers in `v-on` directives

vue/v-on-handler-style

enforce writing style for handlers in v-on directives

• ❗ This rule has not been released yet.
• 🔧 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()" />

<template>
  <!-- ✓ GOOD -->
  <button v-on:click="handler" />

  <!-- ✗ BAD -->
  <button v-on:click="handler()" />
  <button v-on:click="() => handler()" />
</template>

🔧 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 expressions containing comments to be converted to method handlers. However, it will be reported if the second style is not used. This option takes effect if "method" is allowed. Default is false.

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

<template>
  <!-- ✓ GOOD -->
  <button v-on:click="handler" />
  <template v-for="e in list">
    <button v-on:click="e" />
    <button v-on:click="() => handler(e)" />
  </template>

  <!-- ✗ BAD -->
  <button v-on:click="handler()" />
  <button v-on:click="count++" />
  <button v-on:click="() => handler()" />
  <button v-on:click="() => count++" />
  <button v-on:click="(a, b) => handler(a, b)" />
  <template v-for="e in list">
    <button v-on:click="e()" />
    <button v-on:click="() => e()" />
    <button v-on:click="handler(e)" /> <!-- Can use inline function -->
  </template>
</template>

["method", "inline"]

<template>
  <!-- ✓ GOOD -->
  <button v-on:click="handler" />
  <template v-for="e in list">
    <button v-on:click="e" />
    <button v-on:click="handler(e)" />
  </template>

  <!-- ✗ BAD -->
  <button v-on:click="handler()" />
  <button v-on:click="count++" />
  <button v-on:click="() => handler()" />
  <button v-on:click="() => count++" />
  <button v-on:click="(a, b) => handler(a, b)" />
  <template v-for="e in list">
    <button v-on:click="e()" />
    <button v-on:click="() => e()" />
    <button v-on:click="() => handler(e)" /> <!-- Can use inline handler -->
  </template>
</template>

["inline-function"]

<template>
  <!-- ✓ GOOD -->
  <button v-on:click="() => handler()" />
  <button v-on:click="() => count++" />

  <!-- ✗ BAD -->
  <button v-on:click="handler" />
  <button v-on:click="handler()" />
  <button v-on:click="handler($event)" />
  <button v-on:click="count++" />
</template>

["inline"]

<template>
  <!-- ✓ GOOD -->
  <button v-on:click="handler()" />
  <button v-on:click="handler($event)" />
  <button v-on:click="count++" />

  <!-- ✗ BAD -->
  <button v-on:click="handler" />
  <button v-on:click="() => handler()" />
  <button v-on:click="(foo) => handler(foo)" />
  <button v-on:click="(foo, bar) => handler(foo, bar)" />
  <button v-on:click="() => count++" />
</template>

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

<template>
  <!-- ✓ GOOD -->
  <button v-on:click="handler" />
  <button v-on:click="() => handler() /* comment */" />

  <!-- ✗ BAD -->
  <button v-on:click="handler()" />
  <button v-on:click="() => handler()" />
  <button v-on:click="handler() /* comment */" />
</template>

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

<template>
  <!-- ✓ GOOD -->
  <button v-on:click="handler" />
  <button v-on:click="handler() /* comment */" />

  <!-- ✗ BAD -->
  <button v-on:click="handler()" />
  <button v-on:click="() => handler()" />
  <button v-on:click="() => handler() /* comment */" />
</template>

👫 Related Rules

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

📚 Further Reading

• Guide - Inline Handlers
• Guide - Method Handlers

🔍 Implementation

• Rule source
• Test source