Vue prop should be declared properly

VUE_BAD_PROP_DECL
Error
Medium
vue

This rule applies when a Vue prop is not declared properly in props option as the following:

The right-hand side of a prop declaration can be either null, a constructor function (e.g. String, Number), an array of constructors, or an object with validation requirements. If other value is given, prop validation will not work properly. See Example 1 below.
An object with validation requirements can have properties like type, default, validator or required. If a typo exists in property names, prop validation may not work as intended. See Example 2 below.
A type property in the requirement object can have either null, undefined, a constructor, or an array of constructors. See Example 3 below.
In order to avoid the prop validation, it is recommended to use null or undefined instead of other falsy values because a programmer can confuse it as a default value. See Example 4 below.
An object value should not be directly used as the default value of a prop. You should use a factory function that returns the object. See Example 5 below.

-Noncompliant Code Example
+Compliant Code Example
 <script>
 export default {
   props: {
     // Example 1
-    prop1_1: 42, // VUE_BAD_PROP_DECL alarm
+    prop1_1: {
-    prop1_2: 'String', // VUE_BAD_PROP_DECL alarm
+      type: Number,
-    prop1_3: String | Number, // VUE_BAD_PROP_DECL alarm
+      default: 42
     },
     prop1_2: String,
     prop1_3: [String, Number],
     // Example 2
     prop2: {
-      Type: String, // VUE_BAD_PROP_DECL alarm
+      type: String,
-      Default: 'success', // VUE_BAD_PROP_DECL alarm
+      default: 'success',
-      validate: function (value) { // VUE_BAD_PROP_DECL alarm
+      validator: function (value) {
         return ['success', 'warning', 'danger'].indexOf(value) !== 1
       },
-      require: true // VUE_BAD_PROP_DECL alarm
+      required: true
     },
     // Example 3
     prop3: {
-      type: 'String' // VUE_BAD_PROP_DECL alarm
+      type: String
     },
     // Example 4
-    prop4: '', // VUE_BAD_PROP_DECL alarm
+    prop4: null,
     // Example 5
     prop5: {
       type: Array,
-      default: [] // VUE_BAD_PROP_DECL alarm
+      default: function () {
         return [];
       }
     }
   }
 }
 </script>

Noncompliant Code Example

View with compliant examples side by side

<script>
export default {
  props: {
    // Example 1
    prop1_1: 42, // VUE_BAD_PROP_DECL alarm
    prop1_2: 'String', // VUE_BAD_PROP_DECL alarm
    prop1_3: String | Number, // VUE_BAD_PROP_DECL alarm

    // Example 2
    prop2: {
      Type: String, // VUE_BAD_PROP_DECL alarm
      Default: 'success', // VUE_BAD_PROP_DECL alarm
      validate: function (value) { // VUE_BAD_PROP_DECL alarm
        return ['success', 'warning', 'danger'].indexOf(value) !== 1
      },
      require: true // VUE_BAD_PROP_DECL alarm
    },

    // Example 3
    prop3: {
      type: 'String' // VUE_BAD_PROP_DECL alarm
    },

    // Example 4
    prop4: '', // VUE_BAD_PROP_DECL alarm

    // Example 5
    prop5: {
      type: Array,
      default: [] // VUE_BAD_PROP_DECL alarm
    }
  }
}
</script>

Compliant Code Example

View with noncompliant examples side by side

<script>
export default {
  props: {
    // Example 1
    prop1_1: {
      type: Number,
      default: 42
    },
    prop1_2: String,
    prop1_3: [String, Number],

    // Example 2
    prop2: {
      type: String,
      default: 'success',
      validator: function (value) {
        return ['success', 'warning', 'danger'].indexOf(value) !== 1
      },
      required: true
    },

    // Example 3
    prop3: {
      type: String
    },

    // Example 4
    prop4: null,

    // Example 5
    prop5: {
      type: Array,
      default: function () {
        return [];
      }
    }
  }
}
</script>

Vue prop should be declared properly

Noncompliant Code Example

Compliant Code Example

Version

See

Was this documentation helpful?