Rule `vue/v-on-handler-style` default auto fix will bring breaking change into code

[heggria]

What rule do you want to change?

vue/v-on-handler-style

Does this change cause the rule to produce more or fewer warnings?

More

How will the change be implemented? (New option, new default behavior, etc.)?

What does the rule currently do for this code?

In the current default configuration, such as vue/v-on-handler-style: 'warn', the rule will apply the following formatting by default:

// before - variant 1
<div @click="()=>changeFunc()" />

// before - variant 2
<div @click="changeFunc()" />

// after
<div @click="changeFunc" />

When the first argument of changeFunc is not an event and can be undefined, this auto-fix may lead to a breaking change in the code logic. This is because using @click="changeFunc" will pass the event object to changeFunc by default, causing logic errors in the subsequent code.

What will the rule do after it's changed?

By default, the rule will no longer automatically fix the following two types of v-on syntax:

// type 1
<div @click="()=>changeFunc()" />

// type 2
<div @click="changeFunc()" />

[FloEdelmann]

I guess changing the fix to a suggestion that has to be manually applied makes sense here. PRs welcome for that!

[ota-meshi]

I believe this rule will stop unsafe auto-fixes if the method is specific and the number of arguments is known.

https://ota-meshi.github.io/eslint-plugin-vue-demo/#eJyVj70OwiAQx1+F3NQmJU0cG9o4+RRdCJyKUmg4IJqm7y5VYxxcHO/u9/+4BZTXCB2IiNNsZcRhdIwJbTLbK2vUtR+hwowu1v2gztKd8JCcquoRWPuD/Qt5A6L9ChekgpkjI4xpLvOxcNF4x76cZc2W0a2b8kUXDhoIySJBt0BO2Co/TaU11yZgMcjlyV3zvFzoxhMh8SwDfbaZe8dLhLYYOMW73QTr+gDseWL3

But it seems to do an unsafe auto-fix if it can't find the method. I think we should fix that.

[heggria]

I believe this rule will stop unsafe auto-fixes if the method is specific and the number of arguments is known.

https://ota-meshi.github.io/eslint-plugin-vue-demo/#eJyVj70OwiAQx1+F3NQmJU0cG9o4+RRdCJyKUmg4IJqm7y5VYxxcHO/u9/+4BZTXCB2IiNNsZcRhdIwJbTLbK2vUtR+hwowu1v2gztKd8JCcquoRWPuD/Qt5A6L9ChekgpkjI4xpLvOxcNF4x76cZc2W0a2b8kUXDhoIySJBt0BO2Co/TaU11yZgMcjlyV3zvFzoxhMh8SwDfbaZe8dLhLYYOMW73QTr+gDseWL3

But it seems to do an unsafe auto-fix if it can't find the method. I think we should fix that.

@ota-meshi Thank you for your response. Based on my understanding, a better approach to improve the current code would be as follows:

• If the method definition does not exist, avoid automatic fixing and provide suggestions instead.
• If the method definition does exist, check whether the method has parameters.
  • If it does have parameters, avoid automatic fixing and provide suggestions instead.
  • If it doesn't have parameters, proceed with the automatic fix.

Please let me know if I've misunderstood anything. Thanks again!

[jacekkarczmarczyk]

There was a similar issue a while ago https://github.com/vuejs/eslint-plugin-vue/issues/1345

[ota-meshi]

If it does have parameters, avoid automatic fixing and provide suggestions instead.

I think it could probably be auto-fixed if the number of arguments and parameters matched.

<template>
  <MyButton @click="(a) => fn1(a)" />
  <MyButton @click="(a, b) => fn2(a, b)" />

  <!-- Can't auto-fix -->
  <MyButton @click="(a) => fn2(a)" />
</template>
<script setup>
function fn1(a) {}
function fn2(a, b) {}
</script>