v-on-function-call.md

Pattern: Malformed parentheses for v-on directive

Issue: -

Description

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>

Options

Default is set to never.

{
  "vue/v-on-function-call": ["error", "always"|"never"]
}

"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>

"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>

Further Reading

• eslint-plugin-vue - v-on-function-call