Skip to content

Explicit and Implicit undefined values #55

@micha-vb

Description

@micha-vb

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.

  1. The amount is set to a number. => Validates
  2. The amount is omitted. => Validates
  3. 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()?

Metadata

Metadata

Assignees

Labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions