`"boundOnly"` option for `vue/v-on-function-call`

[iliubinskii]

Please describe what the rule should do:

Same as: https://typescript-eslint.io/rules/unbound-method/

What category should the rule belong to? [ ] Enforces code style (layout) [+] Warns about a potential error (problem) [ ] Suggests an alternate way of doing something (suggestion) [ ] Other (please specify:)

Provide 2-3 code examples that this rule should warn about:

<script lang="ts">
import { defineComponent } from "vue";

class C {
  public f(): number {
    return this.x;
  }

  protected x = 1;
}

export default defineComponent({
  name: "page-settings",
  setup() {
    return {
      c: new C()
    };
  }
});
</script>

<template>
  <q-button @click="c.f" />
</template>

Additional context

New rule should report missing brakets for <q-button @click="c.f" />

Without brackets it throws run-time error:

[FloEdelmann]

This rule does already exist: https://eslint.vuejs.org/rules/v-on-function-call.html

[iliubinskii]

@FloEdelmann, thx for the response.

Is it possible to add an option to v-on-function-call that will disallow brackets for @click="fn", but will require brackets for @click="cls.method()"?

The point is that currently "v-on-function-call" does not do what "unbound-method" does. This is unbound method: "cls.method" (because it consists of two parts). It needs bracket. This is not unbound method: "fn" (because it has only one part). It can be left without bracket.

[FloEdelmann]

A new option "boundOnly" (instead of "always" and "never") would be fine for me. Would you like to implement it?

If implemented, this option's docs should link to the explanation in typescript-eslint rule's documentation.

[iliubinskii]

Thx for accepting it as proposition. I am familiar with typescript/eslint plugin development, but eslint-plugin-vue is totaly new to me - so, I'll have to wait for somebody more familiar with it. If I have time, I will more likely try to write a wrapper rule that would allow to use any typescript/eslint rule inside SFC.

[FloEdelmann]

Note that the vue/v-on-function-call rule was deprecated in favor of the new vue/v-on-handler-style rule in #2009. Is this request solved with the new rule? If it isn't, please open a new issue to keep the discussion clear.