vue/v-on-function-call

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

• 🔧 The --fix option on the command line (opens new window) 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>

Now loading...

🔧 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>

Now loading...

"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>

Now loading...

"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>

Now loading...

🚀 Version

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

🔍 Implementation

• Rule source (opens new window)
• Test source (opens new window)