v-bind should not be used on Vue directives

  • VUE_V_BIND_ON_DIRECTIVE
  • Error
  • Medium
  • vue

This rule applies when v-bind is used on Vue directives.

There is no need to use v-bind on a Vue directive because the directive's value is automatically interpreted as a JavaScript expression.
Moreover, if v-bind is used, the directive will not work as intended because it is recognized as a plain attribute.

Noncompliant Code Example

View with compliant examples side by side
<template>
  <div :class="fooClass" :v-if="isFoo"> <!-- VUE_V_BIND_ON_DIRECTIVE alarm because 'v-bind' is used on 'v-if' directive. -->
    Foo
  </div>
</template>

Compliant Code Example

View with noncompliant examples side by side
<template>
  <div :class="fooClass" v-if="isFoo">
    Foo
  </div>
</template>

Version

This rule was introduced in DeepScan 1.17.0-beta.

See

Was this documentation helpful?