no-useless-v-bind.md

pageClass	sidebarDepth	title	description	since
rule-details	0	vue/no-useless-v-bind	disallow unnecessary `v-bind` directives	v7.0.0

vue/no-useless-v-bind

disallow unnecessary v-bind directives

• 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

📖 Rule Details

This rule reports v-bind with a string literal value.
The v-bind with a string literal value can be changed to a static attribute definition.

<template>
  <!-- ✓ GOOD -->
  <div foo="bar" />
  <div :foo="bar" />

  <!-- ✗ BAD -->
  <div v-bind:foo="'bar'" />
  <div :foo="'bar'" />
</template>

🔧 Options

{
  "vue/no-useless-v-bind": ["error", {
    "ignoreIncludesComment": false,
    "ignoreStringEscape": false
  }]
}

• ignoreIncludesComment ... If true, do not report expressions containing comments. default false.
• ignoreStringEscape ... If true, do not report string literals with useful escapes. default false.

"ignoreIncludesComment": true

<template>
  <!-- ✓ GOOD -->
  <div v-bind:foo="'bar' /* comment */" />

  <!-- ✗ BAD -->
  <div v-bind:foo="'bar'" />
</template>

"ignoreStringEscape": true

<template>
  <!-- ✓ GOOD -->
  <div v-bind:foo="'bar\nbaz'" />
</template>

👫 Related Rules

• vue/no-useless-mustaches
• vue/no-useless-concat

🚀 Version

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

🔍 Implementation

• Rule source
• Test source