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:

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.
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.
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
+Compliant Code Example
 <template>
   <div>
     <!-- Example 1 -->
-    <a href="http://foo.com" @click="false"> <!-- VUE_BAD_DIRECTIVE_VALUE alarm because 'false' is not a function. -->
+    <a href="http://foo.com" @click.prevent>
       foo.com
     </a>
     <!-- Example 2 -->
-    <comp v-bind="getProps()"> <!-- VUE_BAD_DIRECTIVE_VALUE alarm because the return value of 'getProps()' is not an object. -->
+    <comp v-bind="getProps()">
       Hello
     </comp>
     <!-- Example 3 -->
-    <div v-for="item in getItems" :key="item.id"> <!-- VUE_BAD_DIRECTIVE_VALUE alarm because 'getItems' is a function. -->
+    <div v-for="item in getItems()" :key="item.id">
       {{ item.name }}
     </div>
   </div>
 </template>
 <script>
 export default {
   methods: {
     getProps() {
-      return 42;
+      return {
         prop1: 42,
         prop2: 42
       }
     },
     getItems() {
       return [
         { id: 1, name: "foo" },
         { id: 2, name: "bar" }
       ];
     }
   }
 }
 </script>

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>

Vue directive should be defined with values of correct types

Noncompliant Code Example

Compliant Code Example

Version

See

Was this documentation helpful?