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" />)

Note: This rule is based on Vue 2.x API specifications.

Noncompliant Code Example

<template>
  <div>
    <input v-model.ltrim="msg"> <!-- VUE_BAD_DIRECTIVE_FORMAT alarm because 'ltrim' modifier is not supported for 'v-model' directive. -->
    <div v-if="shouldHi">Hi</div>
    <div v-else="shouldBye">Bye</div> <!-- VUE_BAD_DIRECTIVE_FORMAT alarm because value is not needed for 'v-else' directive. -->
  </div>
</template>

<script>
  export default {
    data() {
      return { msg: 'hello world' };
    },
    props: {
      shouldHi: {
        type: Boolean,
        default: true
      },
      shouldBye: {
        type: Boolean,
        default: false
      }
    }
  }
</script>

Compliant Code Example

<template>
  <div>
    <input v-model.trim="msg">
    <div v-if="shouldHi">Hi</div>
    <div v-else>Bye</div>
  </div>
</template>

<script>
  export default {
    data() {
      return { msg: 'hello world' };
    },
    props: {
      shouldHi: {
        type: Boolean,
        default: true
      }
    }
  }
</script>

Version

This rule was introduced in DeepScan 1.14.0-beta.

See

• Directives