prefer-true-attribute-shorthand.md

pageClass	sidebarDepth	title	description
rule-details	0	vue/prefer-true-attribute-shorthand	require shorthand form attribute when `v-bind` value is `true`

vue/prefer-true-attribute-shorthand

require shorthand form attribute when v-bind value is true

• ❗ This rule has not been released yet.
• 💡 Some problems reported by this rule are manually fixable by editor suggestions.

📖 Rule Details

v-bind attribute with true value usually can be written in shorthand form. This can reduce verbosity.

<template>
  <!-- ✗ BAD -->
  <MyComponent v-bind:show="true" />
  <MyComponent :show="true" />

  <!-- ✓ GOOD -->
  <MyComponent show />
  <MyComponent another-prop="true" />
</template>

::: warning Warning The shorthand form is not always equivalent! If a prop accepts multiple types, but Boolean is not the first one, a shorthand prop won't pass true. :::

<script>
export default {
  name: 'MyComponent',
  props: {
    bool: Boolean,
    boolOrString: [Boolean, String],
    stringOrBool: [String, Boolean],
  }
}
</script>

Shorthand form:

<MyComponent bool bool-or-string string-or-bool />

bool: true (boolean)
boolOrString: true (boolean)
stringOrBool: "" (string)

Longhand form:

<MyComponent :bool="true" :bool-or-string="true" :string-or-bool="true" />

bool: true (boolean)
boolOrString: true (boolean)
stringOrBool: true (boolean)

Those two calls will introduce different render result. See this demo.

🔧 Options

Default options is "always".

{
  "vue/prefer-true-attribute-shorthand": ["error", "always" | "never"]
}

• "always" (default) ... requires shorthand form.
• "never" ... requires long form.

"never"

<template>
  <!-- ✗ BAD -->
  <MyComponent show />

  <!-- ✓ GOOD -->
  <MyComponent :show="true" />
  <MyComponent v-bind:show="true" />
</template>

🔍 Implementation

• Rule source
• Test source