Vue component should receive prop values of correct prop types
- VUE_MISMATCHED_TYPE_OF_PROP
- Error
- Medium
- vue
This rule applies when a Vue component receives a prop value which does not match its prop type declaration.
When a Vue component receives such a prop value, Vue outputs a warning message.
Noncompliant Code Example
View with compliant examples side by side<template>
<div>
<person :name="myName" :age="20" :isMale="true"/> <!-- VUE_MISMATCHED_TYPE_OF_PROP alarm because 'name' should be string type. -->
<person name="John" age="20" :isMale="true"/> <!-- VUE_MISMATCHED_TYPE_OF_PROP alarm because 'age' should be number type. -->
<person name="Adam" :age="20"/> <!-- VUE_MISMATCHED_TYPE_OF_PROP alarm because 'isMale' is required. -->
</div>
</template>
<script>
export default {
computed: {
myName() {
return 42;
}
},
components: {
person: {
props: {
name: String,
age: {
type: Number,
default: "" // VUE_MISMATCHED_TYPE_OF_PROP alarm because the default value should be number type.
},
isMale: {
type: Boolean,
required: true
}
}
}
}
}
</script>Compliant Code Example
View with noncompliant examples side by side<template>
<div>
<person :name="myName" :age="20" :isMale="true"/>
<person name="John" :age="20" :isMale="true"/>
<person name="Adam" :age="20" :isMail="true"/>
</div>
</template>
<script>
export default {
computed: {
myName() {
return "James";
}
},
components: {
person: {
props: {
name: String,
age: {
type: Number,
default: 0
},
isMale: {
type: Boolean,
required: true
}
}
}
}
}
</script>Version
This rule was introduced in DeepScan 1.40.0.
See
[Vue warn]: Invalid prop: type check failed for prop "age". Expected Number with value 20, got String with value "20".
[Vue warn]: Missing required prop: "isMale"