JS.VUE.V.ON.FUNCTION.CALL
Enforce or forbid parentheses after method calls without arguments in 'v-on' directives
Rule Details
This rule aims to enforce to bind methods to v-on or call methods on v-on when without arguments.
{'vue/v-on-function-call': ['error']}
Copy
<template>
<!-- GOOD -->
<button v-on:click="closeModal">
Close
</button>
<!-- BAD -->
<button v-on:click="closeModal()">
Close
</button>
</template>
Options
Default is set to never.
Copy
{
"vue/v-on-function-call": ["error",
"always"|"never",
{
"ignoreIncludesComment": false
}
]
}
"always"... Always use parentheses inv-ondirectives."never"... Never use parentheses inv-ondirectives for method calls without arguments. this is default.ignoreIncludesComment... Iftrue, do not report expressions containing comments. defaultfalse.
"always" - Always use parentheses in v-on directives
{'vue/v-on-function-call': ['error', 'always']}
Copy
<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
{'vue/v-on-function-call': ['error', 'never']}
Copy
<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 }
{'vue/v-on-function-call': ['error', 'never', {ignoreIncludesComment: true}]}
Copy
<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>
