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

<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

<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

• Built-in Directives