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 using method handlers on v-on, using inline handlers on v-on, or binding inline functions to v-on.

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

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

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

🔧 Options

{
  "vue/v-on-handler-style": ["error",
    [
      "method",
      "inline-function"
    ],
    {
      "ignoreIncludesComment": false
    }
  ]
}

• First option ... An array of names of allowed styles. Default is ["method", "inline-function"].
  • "method" ... Allow handlers by method binding. e.g. v-on:click="handler"
  • "inline" ... Allow inline handlers. e.g. v-on:click="handler()"
    Even if this is not specified, writing styles that cannot be converted to other allowed styles are allowed.
  • "inline-function" ... Allow inline functions. e.g. v-on:click="() => handler()"
    Even if this is not specified, writing styles that cannot be converted to other allowed styles are allowed.
• Second option
  • ignoreIncludesComment ... If true, do not report expressions containing comments. This option takes effect if "method" is allowed. Default is false.

["method"]

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

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

  <!-- Ignore -->
  <button v-on:click="handler(foo)">...</button>
  <button v-on:click="() => handler(foo)">...</button>
</template>

["inline"]

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

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

["inline-function"]

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

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

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

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

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

📚 Further Reading

• Guide - Inline Handlers
• Guide - Method Handlers

🔍 Implementation

• Rule source
• Test source