v-on-function-call.md

pageClass	sidebarDepth	title	description	since
rule-details	0	vue/v-on-function-call	enforce or forbid parentheses after method calls without arguments in `v-on` directives	v5.2.0

vue/v-on-function-call

enforce or forbid parentheses after method calls without arguments in v-on directives

• ⚠️ This rule was deprecated and replaced by vue/v-on-handler-style rule.
• 🔧 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 to bind methods to v-on or call methods on v-on when without arguments.

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

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

🔧 Options

Default is set to never.

{
  "vue/v-on-function-call": ["error",
    "always"|"never",
    {
      "ignoreIncludesComment": false
    }
  ]
}

• "always" ... Always use parentheses in v-on directives.
• "never" ... Never use parentheses in v-on directives for method calls without arguments. this is default.
• ignoreIncludesComment ... If true, do not report expressions containing comments. default false.

"always" - Always use parentheses in v-on directives

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

  <!-- ✗ BAD -->
  <button v-on:click="closeModal">
    Close
  </button>
</template>

"never" - Never use parentheses in v-on directives for method calls without arguments

<template>
  <!-- ✓ GOOD -->
  <button v-on:click="closeModal">
    Close
  </button>
  <button v-on:click="closeModal(arg)">
    Close
  </button>

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

"never", { "ignoreIncludesComment": true }

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

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

🚀 Version

This rule was introduced in eslint-plugin-vue v5.2.0

🔍 Implementation

• Rule source
• Test source