Vue: Component `props` not appearing in `this.$props` unless default value is provided

Created on 15 Mar 2017  路  6Comments  路  Source: vuejs/vue

Vue.js version

2.2.4

Reproduction Link

https://jsfiddle.net/morficus/2Lgcjr5m/2/

Steps to reproduce

1) create a new component with at least one prop
2) make sure at least one of the props do NOT have a default value
3) check for the presence of that prop in this.$props

What is Expected?

Expected for a prop to appear inthis.$props regardless of having a default value or not (presumably with a value of undefined)

What is actually happening?

The prop is not appearing unless it has a default value or an explicitly set value by the parent component.

Most helpful comment

I would say this is by design. $props contains all props that were passed to the current instance, or have a default value.

The feature was intended for situations where you want to access and pass on all currently "active" props, e.g. to a child component. Including those that are neither passed by the parent nor have a default value is not required for that, because their value would be undefined in the child that they were passed to either way.

If you need a list of all possible props, use Objectkeys(this.$options.props)

Or do you have another use case where it would be better to include the undefined props?

All 6 comments

should be {{this.$props}}

@EliazTray hm? can you elaborate on your comment?
What should be {{this.$props}}?

I would say this is by design. $props contains all props that were passed to the current instance, or have a default value.

The feature was intended for situations where you want to access and pass on all currently "active" props, e.g. to a child component. Including those that are neither passed by the parent nor have a default value is not required for that, because their value would be undefined in the child that they were passed to either way.

If you need a list of all possible props, use Objectkeys(this.$options.props)

Or do you have another use case where it would be better to include the undefined props?

oops, close was unintended.

And also doing 'prop' in $props should yield false if the prop wasn't provided
@LinusBorg I think we should close this ftm because of the reasons you gave. The initial propasal is https://github.com/vuejs/vue/issues/4571 in case someone wants to review it. If @morficus provides a valid use case we can always reopen it

@LinusBorg this.$options.props would actually fit my use case perfectly.

I ran in to this issue when writing unit tests for a reusable component. Wanted to check that a specific prop could be set on it. So this.$options.props is actually better than what I was trying originally.

Thanks!

Was this page helpful?
0 / 5 - 0 ratings