eslint-plugin-vue

Appearance

vue/prefer-true-attribute-shorthand ​

require shorthand form attribute when v-bind value is true

  • 💡 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.

Now loading...

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.

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

Shorthand form:

vue
<MyComponent bool bool-or-string string-or-bool />
txt
bool: true (boolean) boolOrString: true (boolean) stringOrBool: "" (string)

Longhand form:

vue
<MyComponent :bool="true" :bool-or-string="true" :string-or-bool="true" />
txt
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".

json
{  "vue/prefer-true-attribute-shorthand": ["error",  "always" | "never",  {  except: []  }  ] }
  • "always" (default) ... requires shorthand form.
  • "never" ... requires long form.
  • except (string[]) ... specifies a list of attribute names that should be treated differently.

"never" ​

Now loading...

"never", { 'except': ['value', '/^foo-/'] } ​

Now loading...

🚀 Version ​

This rule was introduced in eslint-plugin-vue v8.5.0

🔍 Implementation ​