Skip to content

Latest commit

 

History

History
224 lines (170 loc) · 6.18 KB

v-on-handler-style.md

File metadata and controls

224 lines (170 loc) · 6.18 KB
Raw
pageClass sidebarDepth title description since
rule-details
0
vue/v-on-handler-style
enforce writing style for handlers in `v-on` directives
v9.7.0

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()" />
<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 inline handlers or inline functions containing comments, even if the preferred style is "method". 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)" />
  </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)" />
  </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

📚 Further Reading

🚀 Version

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

🔍 Implementation