diff --git a/docs/rules/index.md b/docs/rules/index.md
index 9624111c6..2a0ad7bfa 100644
--- a/docs/rules/index.md
+++ b/docs/rules/index.md
@@ -162,7 +162,7 @@ Rules in this category are enabled for all presets provided by eslint-plugin-vue
 | [vue/singleline-html-element-content-newline](./singleline-html-element-content-newline.md) | require a line break before and after the contents of a singleline element | :wrench: | :three::two::lipstick: |
 | [vue/v-bind-style](./v-bind-style.md) | enforce `v-bind` directive style | :wrench: | :three::two::hammer: |
 | [vue/v-on-event-hyphenation](./v-on-event-hyphenation.md) | enforce v-on event naming style on custom components in template | :wrench: | :three::hammer: |
-| [vue/v-on-style](./v-on-style.md) | enforce `v-on` directive style | :wrench: | :three::two::hammer: |
+| [vue/v-on-style](./v-on-style.md) | enforce `v-on` directive style | :wrench::bulb: | :three::two::hammer: |
 | [vue/v-slot-style](./v-slot-style.md) | enforce `v-slot` directive style | :wrench: | :three::two::hammer: |
 
 </rules-table>
diff --git a/docs/rules/v-on-style.md b/docs/rules/v-on-style.md
index 56bcb2221..75736ca94 100644
--- a/docs/rules/v-on-style.md
+++ b/docs/rules/v-on-style.md
@@ -12,6 +12,7 @@ since: v3.0.0
 
 - :gear: This rule is included in all of `"plugin:vue/vue3-strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/vue3-recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/vue2-recommended"]`.
 - :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
 
 ## :book: Rule Details
 
diff --git a/lib/rules/v-on-handler-style.js b/lib/rules/v-on-handler-style.js
index 10ff9b6b1..0d6671f15 100644
--- a/lib/rules/v-on-handler-style.js
+++ b/lib/rules/v-on-handler-style.js
@@ -112,6 +112,7 @@ module.exports = {
 url: 'https://eslint.vuejs.org/rules/v-on-handler-style.html'
 },
 fixable: 'code',
+ hasSuggestions: true,
 schema: [
 {
 oneOf: [
@@ -157,7 +158,11 @@ module.exports = {
 preferInlineFunctionOverMethod:
 'Prefer inline function over method handler in v-on.',
 preferInlineFunctionOverInline:
- 'Prefer inline function over inline handler in v-on.'
+ 'Prefer inline function over inline handler in v-on.',
+ removeParenthesesOverInline:
+ 'Remove the parentheses from the inline handler in v-on.',
+ removeParenthesesOverInlineFunction:
+ 'Remove the parentheses from the inline function in v-on.'
 }
 },
 /** @param {RuleContext} context */
@@ -300,6 +305,36 @@ module.exports = {
 return false
 }
 
+ // disable the auto-fixed when the node does't have params
+ if (
+ !hasComment /* The statement contains comment and cannot be fixed. */ &&
+ idCallExpr /* The statement is not a simple identifier call and cannot be fixed. */ &&
+ idCallExpr.arguments.length === 0
+ ) {
+ const paramCount = methodParamCountMap.get(idCallExpr.callee.name)
+ if (
+ idCallExpr &&
+ (idCallExpr.arguments.length === 0 &#124;&#124; paramCount === 0)
+ ) {
+ context.report({
+ node,
+ messageId: 'preferMethodOverInline',
+ suggest: [
+ {
+ messageId: 'removeParenthesesOverInline',
+ fix(fixer) {
+ return fixer.replaceTextRange(
+ rangeWithoutQuotes,
+ context.getSourceCode().getText(idCallExpr.callee)
+ )
+ }
+ }
+ ]
+ })
+ return true
+ }
+ }
+
 context.report({
 node,
 messageId: idCallExpr
@@ -324,6 +359,7 @@ module.exports = {
 )
 }
 })
+
 return true
 }
 /**
@@ -356,6 +392,30 @@ module.exports = {
 return false
 }
 
+ // disable the auto-fixed when the node does't have params
+ if (
+ !hasComment /* The statement contains comment and cannot be fixed. */ &&
+ idCallExpr /* The statement is not a simple identifier call and cannot be fixed. */ &&
+ (node.params.length === 0 &#124;&#124; !isSameParamsAndArgs(idCallExpr))
+ ) {
+ context.report({
+ node,
+ messageId: 'preferMethodOverInlineFunction',
+ suggest: [
+ {
+ messageId: 'removeParenthesesOverInlineFunction',
+ fix(fixer) {
+ return fixer.replaceTextRange(
+ rangeWithoutQuotes,
+ context.getSourceCode().getText(idCallExpr.callee)
+ )
+ }
+ }
+ ]
+ })
+ return true
+ }
+
 context.report({
 node,
 messageId: idCallExpr
@@ -368,10 +428,6 @@ module.exports = {
 ) {
 return null
 }
- if (!isSameParamsAndArgs(idCallExpr)) {
- // It is not a call with the arguments given as is.
- return null
- }
 const paramCount = methodParamCountMap.get(idCallExpr.callee.name)
 if (
 paramCount != null &&
diff --git a/tests/lib/rules/v-on-handler-style.js b/tests/lib/rules/v-on-handler-style.js
index a169402f7..4915bf507 100644
--- a/tests/lib/rules/v-on-handler-style.js
+++ b/tests/lib/rules/v-on-handler-style.js
@@ -81,22 +81,38 @@ tester.run('v-on-handler-style', rule, {
 <button @click="foo()" />
 <button @click="() => foo()" />
 </template>`,
- output: `<template>
- <button @click="foo" />
- <button @click="foo" />
- <button @click="foo" />
- </template>`,
+ output: null,
 options: [['method', 'inline-function']],
 errors: [
 {
 message: 'Prefer method handler over inline handler in v-on.',
 line: 3,
- column: 25
+ column: 25,
+ suggestions: [
+ {
+ messageId: 'removeParenthesesOverInline',
+ output: `<template>
+ <button @click="foo" />
+ <button @click="foo" />
+ <button @click="() => foo()" />
+ </template>`
+ }
+ ]
 },
 {
 message: 'Prefer method handler over inline function in v-on.',
 line: 4,
- column: 25
+ column: 25,
+ suggestions: [
+ {
+ messageId: 'removeParenthesesOverInlineFunction',
+ output: `<template>
+ <button @click="foo" />
+ <button @click="foo()" />
+ <button @click="foo" />
+ </template>`
+ }
+ ]
 }
 ]
 },
@@ -107,21 +123,37 @@ tester.run('v-on-handler-style', rule, {
 <button @click="foo()" />
 <button @click="() => foo()" />
 </template>`,
- output: `<template>
- <button @click="foo" />
- <button @click="foo" />
- <button @click="foo" />
- </template>`,
+ output: null,
 errors: [
 {
 message: 'Prefer method handler over inline handler in v-on.',
 line: 3,
- column: 25
+ column: 25,
+ suggestions: [
+ {
+ messageId: 'removeParenthesesOverInline',
+ output: `<template>
+ <button @click="foo" />
+ <button @click="foo" />
+ <button @click="() => foo()" />
+ </template>`
+ }
+ ]
 },
 {
 message: 'Prefer method handler over inline function in v-on.',
 line: 4,
- column: 25
+ column: 25,
+ suggestions: [
+ {
+ messageId: 'removeParenthesesOverInlineFunction',
+ output: `<template>
+ <button @click="foo" />
+ <button @click="foo()" />
+ <button @click="foo" />
+ </template>`
+ }
+ ]
 }
 ]
 },
@@ -181,13 +213,19 @@ tester.run('v-on-handler-style', rule, {
 {
 filename: 'test.vue',
 code: '<template><div @click="foo( )" /></template>',
- output: `<template><div @click="foo" /></template>`,
+ output: null,
 options: [['method', 'inline-function']],
 errors: [
 {
 message: 'Prefer method handler over inline handler in v-on.',
 line: 1,
- column: 24
+ column: 24,
+ suggestions: [
+ {
+ messageId: 'removeParenthesesOverInline',
+ output: `<template><div @click="foo" /></template>`
+ }
+ ]
 }
 ]
 },
@@ -266,34 +304,76 @@ tester.run('v-on-handler-style', rule, {
 <button @click="{ fn(); }" />
 <button @click="{(fn());;;}" />
 </template>`,
- output: `
- <template>
- <button @click="fn" />
- <button @click="fn" />
- <button @click="fn" />
- <button @click="fn" />
- </template>`,
+ output: null,
 options: [['method', 'inline-function']],
 errors: [
 {
 message: 'Prefer method handler over inline handler in v-on.',
 line: 3,
- column: 25
+ column: 25,
+ suggestions: [
+ {
+ messageId: 'removeParenthesesOverInline',
+ output: `
+ <template>
+ <button @click="fn" />
+ <button @click="fn();;" />
+ <button @click="{ fn(); }" />
+ <button @click="{(fn());;;}" />
+ </template>`
+ }
+ ]
 },
 {
 message: 'Prefer method handler over inline handler in v-on.',
 line: 4,
- column: 25
+ column: 25,
+ suggestions: [
+ {
+ messageId: 'removeParenthesesOverInline',
+ output: `
+ <template>
+ <button @click="fn();" />
+ <button @click="fn" />
+ <button @click="{ fn(); }" />
+ <button @click="{(fn());;;}" />
+ </template>`
+ }
+ ]
 },
 {
 message: 'Prefer method handler over inline handler in v-on.',
 line: 5,
- column: 25
+ column: 25,
+ suggestions: [
+ {
+ messageId: 'removeParenthesesOverInline',
+ output: `
+ <template>
+ <button @click="fn();" />
+ <button @click="fn();;" />
+ <button @click="fn" />
+ <button @click="{(fn());;;}" />
+ </template>`
+ }
+ ]
 },
 {
 message: 'Prefer method handler over inline handler in v-on.',
 line: 6,
- column: 25
+ column: 25,
+ suggestions: [
+ {
+ messageId: 'removeParenthesesOverInline',
+ output: `
+ <template>
+ <button @click="fn();" />
+ <button @click="fn();;" />
+ <button @click="{ fn(); }" />
+ <button @click="fn" />
+ </template>`
+ }
+ ]
 }
 ]
 },
@@ -304,22 +384,38 @@ tester.run('v-on-handler-style', rule, {
 <div @click=" beforeSpace()" />
 <div @click='afterSpace() ' />
 </template>`,
- output: `
- <template>
- <div @click="beforeSpace" />
- <div @click='afterSpace' />
- </template>`,
+ output: null,
 options: [['method', 'inline-function']],
 errors: [
 {
 message: 'Prefer method handler over inline handler in v-on.',
 line: 3,
- column: 23
+ column: 23,
+ suggestions: [
+ {
+ messageId: 'removeParenthesesOverInline',
+ output: `
+ <template>
+ <div @click="beforeSpace" />
+ <div @click='afterSpace() ' />
+ </template>`
+ }
+ ]
 },
 {
 message: 'Prefer method handler over inline handler in v-on.',
 line: 4,
- column: 22
+ column: 22,
+ suggestions: [
+ {
+ messageId: 'removeParenthesesOverInline',
+ output: `
+ <template>
+ <div @click=" beforeSpace()" />
+ <div @click='afterSpace' />
+ </template>`
+ }
+ ]
 }
 ]
 },
@@ -329,16 +425,22 @@ tester.run('v-on-handler-style', rule, {
 <template>
 <button @click=" &#x66;oo ( ) " />
 </template>`,
- output: `
- <template>
- <button @click="&#x66;oo" />
- </template>`,
+ output: null,
 options: [['method', 'inline-function']],
 errors: [
 {
 message: 'Prefer method handler over inline handler in v-on.',
 line: 3,
- column: 26
+ column: 26,
+ suggestions: [
+ {
+ messageId: 'removeParenthesesOverInline',
+ output: `
+ <template>
+ <button @click="&#x66;oo" />
+ </template>`
+ }
+ ]
 }
 ]
 },
@@ -353,7 +455,17 @@ tester.run('v-on-handler-style', rule, {
 }
 }
 </script>`,
- output: `
+ output: null,
+ options: [['method', 'inline-function']],
+ errors: [
+ {
+ message: 'Prefer method handler over inline handler in v-on.',
+ line: 2,
+ column: 33,
+ suggestions: [
+ {
+ messageId: 'removeParenthesesOverInline',
+ output: `
 <template><button @click="foo" /></template>
 `,
- options: [['method', 'inline-function']],
- errors: [
- {
- message: 'Prefer method handler over inline handler in v-on.',
- line: 2,
- column: 33
+ </script>`
+ }
+ ]
 }
 ]
 },
@@ -382,7 +490,17 @@ tester.run('v-on-handler-style', rule, {
 }
 }
 </script>`,
- output: `
+ output: null,
+ options: [['method', 'inline-function']],
+ errors: [
+ {
+ message: 'Prefer method handler over inline handler in v-on.',
+ line: 2,
+ column: 33,
+ suggestions: [
+ {
+ messageId: 'removeParenthesesOverInline',
+ output: `
 <template><button @click="foo" /></template>
 `,
- options: [['method', 'inline-function']],
- errors: [
- {
- message: 'Prefer method handler over inline handler in v-on.',
- line: 2,
- column: 33
+ </script>`
+ }
+ ]
 }
 ]
 },
@@ -545,17 +659,23 @@ tester.run('v-on-handler-style', rule, {
 <button @click="e()" />
 </template>
 </template>`,
- output: `<template>
- <template v-for="e in list">
- <button @click="e" />
- </template>
- </template>`,
+ output: null,
 options: [['method', 'inline-function']],
 errors: [
 {
 message: 'Prefer method handler over inline handler in v-on.',
 line: 3,
- column: 27
+ column: 27,
+ suggestions: [
+ {
+ messageId: 'removeParenthesesOverInline',
+ output: `<template>
+ <template v-for="e in list">
+ <button @click="e" />
+ </template>
+ </template>`
+ }
+ ]
 }
 ]
 },
@@ -716,16 +836,26 @@ tester.run('v-on-handler-style', rule, {
 <button @click="() => { foo() }" />
 </template>`,
 output: `<template>
+ <button @click="() => foo()" />
 <button @click="foo" />
- <button @click="foo" />
- <button @click="foo" />
+ <button @click="() => { foo() }" />
 </template>`,
 options: [['method', 'inline']],
 errors: [
 {
 message: 'Prefer method handler over inline function in v-on.',
 line: 2,
- column: 25
+ column: 25,
+ suggestions: [
+ {
+ messageId: 'removeParenthesesOverInlineFunction',
+ output: `<template>
+ <button @click="foo" />
+ <button @click="(a, b) => foo(a, b)" />
+ <button @click="() => { foo() }" />
+ </template>`
+ }
+ ]
 },
 {
 message: 'Prefer method handler over inline function in v-on.',
@@ -735,7 +865,17 @@ tester.run('v-on-handler-style', rule, {
 {
 message: 'Prefer method handler over inline function in v-on.',
 line: 4,
- column: 25
+ column: 25,
+ suggestions: [
+ {
+ messageId: 'removeParenthesesOverInlineFunction',
+ output: `<template>
+ <button @click="() => foo()" />
+ <button @click="(a, b) => foo(a, b)" />
+ <button @click="foo" />
+ </template>`
+ }
+ ]
 }
 ]
 },
@@ -1008,7 +1148,7 @@ tester.run('v-on-handler-style', rule, {
 </template>`,
 output: `<template>
 <template v-for="e in list">
- <button @click="e" />
+ <button @click="() => e()" />
 <button @click="e" />
 <button @click="e" />
 </template>
</div><div class="naked_ctrl">
<form action="/index.cgi/contrast" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://patch-diff.githubusercontent.com/raw/vuejs/eslint-plugin-vue/pull/2539.diff">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://patch-diff.githubusercontent.com/raw/vuejs/eslint-plugin-vue/pull/2539.diff" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast" selected="selected">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>