Note

This is a documentation for version 7.0.0-beta.2.
To check version 6.2.2 go here. To check previous releases go here.

# 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 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...

# 🔍 Implementation