html-button-has-type.md

pageClass	sidebarDepth	title	description	since
rule-details	0	vue/html-button-has-type	disallow usage of button without an explicit type attribute	v7.6.0

vue/html-button-has-type

disallow usage of button without an explicit type attribute

Forgetting the type attribute on a button defaults it to being a submit type. This is nearly never what is intended, especially in your average one-page application.

📖 Rule Details

This rule aims to warn if no type or an invalid type is used on a button type attribute.

<template>
  <!-- ✓ GOOD -->
  <button type="button">Hello World</button>
  <button type="submit">Hello World</button>
  <button type="reset">Hello World</button>

  <!-- ✗ BAD -->
  <button>Hello World</button>
  <button type="">Hello World</button>
  <button type="foo">Hello World</button>
</template>

🔧 Options

{
  "vue/html-button-has-type": ["error", {
    "button": true,
    "submit": true,
    "reset": true
  }]
}

• button ... <button type="button"></button>
  • true (default) ... allow value button.
  • false ... disallow value button.
• submit ... <button type="submit"></button>
  • true (default) ... allow value submit.
  • false ... disallow value submit.
• reset ... <button type="reset"></button>
  • true (default) ... allow value reset.
  • false ... disallow value reset.

🚀 Version

This rule was introduced in eslint-plugin-vue v7.6.0

🔍 Implementation

• Rule source
• Test source