JS.VUE.NO.USELESS.V.BIND

Disallow unnecessary 'v-bind' directives

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.

{'vue/no-useless-v-bind': ['error']}

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

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

Options

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

{'vue/no-useless-v-bind': ['error', {ignoreIncludesComment: true}]}

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

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

"ignoreStringEscape": true

{'vue/no-useless-v-bind': ['error', {ignoreStringEscape: true}]}

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

The content on this page is adapted from the ESLint User Guide. Copyright © OpenJS Foundation and other contributors, www.openjsf.org. All rights reserved. https://eslint.org/docs/rules/