-
Notifications
You must be signed in to change notification settings - Fork 34
Closed
Labels
Description
Hi,
I just noticed, that it makes a difference if a prop is implicitly or explicitly undefined.
The following code shows the issue:
App.vue
<template>
<TestComponent
:items="[
{
title: 'Title1',
amount: 1,
},
{
title: 'Title2',
// Setting amount implicitly to undefined does validate
},
{
title: 'Title3',
amount: undefined, // Setting amount explicitly to undefined does not validate
},
]"
/>
</template>
<script>
import TestComponent from './TestComponent.vue'
export default {
name: 'App',
components: {
TestComponent,
},
}
</script>
TestComponent.vue
<template>
<ul>
<li v-for="item in items">
{{ item.title }}
<span v-if="item.amount">
({{ item.amount}})
</span>
</li>
</ul>
</template>
<script>
import VueTypes from 'vue-types'
export default {
name: 'TestComponent',
props: {
items: VueTypes.arrayOf(VueTypes.shape({
title: VueTypes.string.isRequired,
amount: VueTypes.number.def(0),
}).loose).isRequired,
}
}
</script>
In App.vue I am passing an array with three different ways to set an amount.
- The amount is set to a number. => Validates
- The amount is omitted. => Validates
- The amount is explicitly set to undefined. => Does not validate (
number - value "undefined" should be of type "Number")
Shouldn't 2 and 3 behave exactly the same and fall back to 0 as set by the def()?