Vue directive should be defined with values of correct types

  • VUE_BAD_DIRECTIVE_VALUE
  • Error
  • Medium
  • vue

This rule applies when values of wrong types are used at Vue directives.

Vue requires specific types of values for some directives.
If wrong values are used as follows, unintended behaviors may occur:

  1. A non-function value is used at v-on directive. In this case, a TypeError exception is thrown when the corresponding event fires. See Example 1 below.
  2. A non-object value is used at v-bind or v-on directive without an argument. In this case, the directive is ignored and Vue outputs a warning message. See Example 2 below.
  3. A function is used as the iteration source of v-for directive. In this case, the directive is ignored and no iteration occurs.

Noncompliant Code Example

View with compliant examples side by side
<template>
  <div>
    <!-- Example 1 -->
    <a href="http://foo.com" @click="false"> <!-- VUE_BAD_DIRECTIVE_VALUE alarm because 'false' is not a function. -->
      foo.com
    </a>

    <!-- Example 2 -->
    <comp v-bind="getProps()"> <!-- VUE_BAD_DIRECTIVE_VALUE alarm because the return value of 'getProps()' is not an object. -->
      Hello
    </comp>

    <!-- Example 3 -->
    <div v-for="item in getItems" :key="item.id"> <!-- VUE_BAD_DIRECTIVE_VALUE alarm because 'getItems' is a function. -->
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    getProps() {
      return 42;
    },
    getItems() {
      return [
        { id: 1, name: "foo" },
        { id: 2, name: "bar" }
      ];
    }
  }
}
</script>

Compliant Code Example

View with noncompliant examples side by side
<template>
  <div>
    <!-- Example 1 -->
    <a href="http://foo.com" @click.prevent>
      foo.com
    </a>

    <!-- Example 2 -->
    <comp v-bind="getProps()">
      Hello
    </comp>

    <!-- Example 3 -->
    <div v-for="item in getItems()" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    getProps() {
      return {
        prop1: 42,
        prop2: 42
      }
    },
    getItems() {
      return [
        { id: 1, name: "foo" },
        { id: 2, name: "bar" }
      ];
    }
  }
}
</script>

Version

This rule was introduced in DeepScan 1.40.0.

See

  • Directives

  • [Vue warn]: Error in v-on handler: "TypeError: handler.apply is not a function"

  • [Vue warn]: v-bind without argument expects an Object or Array value

  • [Vue warn]: v-on without argument expects an Object value

Was this documentation helpful?