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>
  <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