<p dir="auto">Hello Vue Lovers! :D</p>
<p dir="auto">Today I realized that there is something I really miss in VueJS that I liked in Angular2.</p>
<p dir="auto">It's the ? operator. It's explained very good here:<br>
<a href="https://angular.io/docs/ts/latest/guide/template-syntax.html#!#safe-navigation-operator" rel="nofollow">https://angular.io/docs/ts/latest/guide/template-syntax.html#!#safe-navigation-operator</a></p>
<p dir="auto">I give a quick example.<br>
Everybody knows this problem.</p>
<p dir="auto">If I get a hero async and I want to display a subproperty like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="The null hero's name is {{ hero.address.street }}"><pre class="notranslate"><code class="notranslate">The null hero's name is {{ hero.address.street }}
</code></pre></div>
<p dir="auto">.. and the hero is not yet loaded, I will get an error like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="TypeError: Cannot read property 'address' of undefined.
or
TypeError: Cannot read property 'address' of street"><pre class="notranslate"><code class="notranslate">TypeError: Cannot read property 'address' of undefined.
or
TypeError: Cannot read property 'address' of street
</code></pre></div>
<p dir="auto">Usually we have to make a</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="v-if=&quot;hero &amp;&amp; hero.address&quot;"><pre class="notranslate"><code class="notranslate">v-if="hero &amp;&amp; hero.address"
</code></pre></div>
<p dir="auto">or something like that.</p>
<p dir="auto">That's why in Angular2 they have the so-called "? operator"<br>
So you can do something like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="The null hero's name is {{ hero?.address?.street }}"><pre class="notranslate"><code class="notranslate">The null hero's name is {{ hero?.address?.street }}
</code></pre></div>
<p dir="auto">So it will do the if statements for us in a really convenient way.</p>
<p dir="auto">Is it possible to integrate something like this in VueJS?<br>
This would be amazing! :)</p>
<h1 dir="auto">Feature Request</h1>
<h2 dir="auto">Problem</h2>
<p dir="auto">While accessing the data from view in template expression, if a null object is used like below :</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{{  book  }} "><pre class="notranslate"><code class="notranslate">{{  book  }} 
</code></pre></div>
<p dir="auto">View is rendered and displayed value is blank.</p>
<p dir="auto">Suppose the template expression involves a property path, as in this next example where we’re displaying the name of a null book.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{{  book.name  }} "><pre class="notranslate"><code class="notranslate">{{  book.name  }} 
</code></pre></div>
<p dir="auto">This would throw a null reference error :<br>
TypeError: Cannot read property 'name' of null.</p>
<h2 dir="auto">Workaround</h2>
<p dir="auto">We can find a workaround for this using a conditional block like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div v-if=&quot;book&quot;&gt;
{{  book.name  }} 
&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div v-if="book"&gt;
{{  book.name  }} 
&lt;/div&gt;
</code></pre></div>
<p dir="auto">But if we have a use case where we need a property path deep into the object some thing like this ?</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="a.b.c.d"><pre class="notranslate"><code class="notranslate">a.b.c.d
</code></pre></div>
<h2 dir="auto">Solution</h2>
<p dir="auto">We can use a safe navigation operator ( ?. ) or elvis operator similar to Angular 2. That can help in reducing a lot of conditional tags in a complex code.</p>