<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">Due to the compositional nature of vuejs apps it is often necessary to define props that are simply passed down to some child component (without otherwise using them in the parent). By coercing an unset (= undefined) prop value to false, vue prevents the usage of <strong>default values</strong> in props with type Boolean. Also, in the context of Boolean typed props it does make a difference wether something is explicitly <code class="notranslate">true</code> or <code class="notranslate">false</code> or <code class="notranslate">undefined</code>.</p>
<h3 dir="auto">Usage scenario</h3>
<ul dir="auto">
<li>Suppose there are two components <code class="notranslate">ParentComp</code> and <code class="notranslate">ChildComp</code>.</li>
<li><code class="notranslate">ChildComp</code> has props <code class="notranslate">propA</code>, <code class="notranslate">propB</code> and <code class="notranslate">propC</code>.</li>
<li><code class="notranslate">ParentComp</code> uses an instance of <code class="notranslate">ChildComp</code> but it does not (and should not) know, what values to provide for the props of ChildProp</li>
<li>hence, <code class="notranslate">ParentComp</code> moves the responsibility of providing the ChildComp props out to the outer scope by itself defining props <code class="notranslate">propA</code>, <code class="notranslate">propB</code> and <code class="notranslate">propC</code> and simply passing them down to the child</li>
<li>now it's up to the user of <code class="notranslate">ParentComp</code> to provide the correct input for the props.</li>
<li><strong><code class="notranslate">ChildComp</code> has default values for it's own props</strong></li>
<li><strong><code class="notranslate">ParentComp</code> does not define defaults</strong>. Remember, it does not know how to use <code class="notranslate">ChildComp</code> and simply moves this responsibility away from itself by letting the user decide</li>
</ul>
<p dir="auto">The setup described above leads to the following, useful behavior:<br>
The user of <code class="notranslate">ParentComp</code> may decide to provide values for <code class="notranslate">propA</code>, <code class="notranslate">propB</code> and <code class="notranslate">propC</code> <strong>or may also ommit one or more of these props</strong>. If the values are ommited, <strong>the defaults of the child kick in and provide useful values</strong>.</p>
<h3 dir="auto">The Problem</h3>
<p dir="auto">The bahavior described above works for all prop types except for <code class="notranslate">Boolean</code>. Ommiting parent prop values usually leads to the child prop using its own default values. In the case of <code class="notranslate">Boolean</code> props however, the parent prop without default value (= undefined) is always transformed to <code class="notranslate">false</code>, effectively breaking this pattern of <em>use child default if parent prop value ommited</em>. If the child defined a boolean prop with <code class="notranslate">true</code> as default, this value is now always overwritten by the parent prop to <code class="notranslate">false</code>. Now the parent prop has to explicitly define the prop default value to be <code class="notranslate">true</code>. In other words: It needs to know an implementation detail of it's child.</p>
<h3 dir="auto">What does the proposed API look like?</h3>
<h3 dir="auto"><code class="notranslate">ChildComp</code> props:</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="props : {
    propA : {
        type : String,
        default : 'some default',
    },

    propB : {
        type : Array,
        default : () =&gt; [],
    },

    propC : {
        type : Boolean,
        default : true,
    }
}"><pre class="notranslate"><code class="notranslate">props : {
    propA : {
        type : String,
        default : 'some default',
    },

    propB : {
        type : Array,
        default : () =&gt; [],
    },

    propC : {
        type : Boolean,
        default : true,
    }
}
</code></pre></div>
<h3 dir="auto"><code class="notranslate">ParentComp</code> props:</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="props : {
    propA : {
        type : String,
    },

    propB : {
        type : Array,
    },

    propC : {
        type : Boolean,
    }
}"><pre class="notranslate"><code class="notranslate">props : {
    propA : {
        type : String,
    },

    propB : {
        type : Array,
    },

    propC : {
        type : Boolean,
    }
}
</code></pre></div>
<h3 dir="auto"><code class="notranslate">ParentComp</code> template:</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div&gt;
    &lt;child-comp
        :prop-a=&quot;propA&quot;
        :prop-b=&quot;propB&quot;
        :prop-c=&quot;propC&quot;/&gt;
&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div&gt;
    &lt;child-comp
        :prop-a="propA"
        :prop-b="propB"
        :prop-c="propC"/&gt;
&lt;/div&gt;
</code></pre></div>
<h3 dir="auto">Usage of <code class="notranslate">ParentComp</code>:</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;parent-comp/&gt;    // props are not set"><pre class="notranslate"><code class="notranslate">&lt;parent-comp/&gt;    // props are not set
</code></pre></div>
<h4 dir="auto">Resulting values of <code class="notranslate">ChildComp</code> (as currently implemented in vue):</h4>
<p dir="auto"><code class="notranslate">propA: 'some default'</code><br>
<code class="notranslate">propB: []</code><br>
<code class="notranslate">propC: false</code></p>
<h4 dir="auto">Proposed change:</h4>
<p dir="auto"><code class="notranslate">propA: 'some default'</code><br>
<code class="notranslate">propB: []</code><br>
<strong><code class="notranslate">propC: true</code></strong></p>
<h3 dir="auto">Vue.js version</h3>
<p dir="auto">2.1.10</p>
<h3 dir="auto">Reproduction Link</h3>
<p dir="auto"><a href="https://jsfiddle.net/nymhjosc/" rel="nofollow">https://jsfiddle.net/nymhjosc/</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">Simply omit a Boolean prop and the value will be casted to <code class="notranslate">false</code>.</p>
<h3 dir="auto">What is Expected?</h3>
<p dir="auto">I'd expect to have an <code class="notranslate">undefined</code> property just to know that the user didn't provide it (since it is not a required prop). Basically, I would expect both <code class="notranslate">myProp</code> and <code class="notranslate">missingProp</code> in the previous example to be the same.</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">When the prop is not provided its content is casted to <code class="notranslate">false</code>. Also, some other values like <code class="notranslate">''</code> are casted to <code class="notranslate">true</code> (somewhat related to <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="196963252" data-permission-text="Title is private" data-url="https://github.com/vuejs/vue/issues/4538" data-hovercard-type="issue" data-hovercard-url="/vuejs/vue/issues/4538/hovercard" href="https://github.com/vuejs/vue/issues/4538">#4538</a>) but I guess this is intended. I'm using <code class="notranslate">default: undefined</code> for now.</p>