Vue directive should be defined with a right format

  • VUE_BAD_DIRECTIVE_FORMAT
  • Error
  • Medium
  • vue

This rule applies when a Vue directive is defined with a wrong format.

Vue provides a specific format for each directive.
If a directive is wrongly defined as follows, the directive is ignored and malfunctions may occur:

  1. An argument is used at the directive which cannot have any argument (e.g. <span v-text:aaa="foo" />).
  2. A modifier is used at the directive which cannot have any modifier (e.g. <span v-text.aaa="foo" />).
  3. An unsupported modifier is used (e.g. <input v-model.ltrim="msg">).
  4. An attribute value is missing, but it is required at the directive (e.g. <span v-text />).
  5. An attribute value is defined at the directive which requires no value (e.g. <span v-once="foo" />).
  6. A modifier is used at the v-on directive without an argument (e.g. <span v-on.once="foo" />).

Noncompliant Code Example

View with compliant examples side by side
<template>
  <input v-model.ltrim="msg"> <!-- VUE_BAD_DIRECTIVE_FORMAT alarm because 'ltrim' modifier is not supported for 'v-model' directive. -->
  <div v-if="sayHi">Hi</div>
  <div v-else="sayBye">Bye</div> <!-- VUE_BAD_DIRECTIVE_FORMAT alarm because value is not needed for 'v-else' directive. -->
</template>

Compliant Code Example

View with noncompliant examples side by side
<template>
  <input v-model.trim="msg">
  <div v-if="sayHi">Hi</div>
  <div v-else-if="sayBye">Bye</div>
</template>

Version

This rule was introduced in DeepScan 1.14.0-beta.

See

Was this documentation helpful?