<p dir="auto">As stated in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="54303496" data-permission-text="Title is private" data-url="https://github.com/vuejs/vue/issues/677" data-hovercard-type="issue" data-hovercard-url="/vuejs/vue/issues/677/hovercard" href="https://github.com/vuejs/vue/issues/677">#677</a> currently you have to wrap a v-for with an if to catch if an array is empty. I'd love a tag like <code class="notranslate">v-empty</code> to do that. It would work like <code class="notranslate">v-else</code> and you put it right after a <code class="notranslate">v-for</code> (maybe also <code class="notranslate">v-else</code> could also be reused for that?).<br>
The <code class="notranslate">v-empty</code> block triggeres if the <code class="notranslate">v-for</code> list is empty. Just like the equivalent django template tag: <a href="https://docs.djangoproject.com/en/1.9/ref/templates/builtins/#for-empty" rel="nofollow">https://docs.djangoproject.com/en/1.9/ref/templates/builtins/#for-empty</a></p>
<p dir="auto">Example:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div v-for=&quot;(index, item) in items&quot;&gt;
  {{ index }} {{ item.message }}
&lt;/div&gt;
&lt;div v-empty&gt;
  &lt;p&gt;Sorry, no elements yet.&lt;/p&gt;
&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div v-for="(index, item) in items"&gt;
  {{ index }} {{ item.message }}
&lt;/div&gt;
&lt;div v-empty&gt;
  &lt;p&gt;Sorry, no elements yet.&lt;/p&gt;
&lt;/div&gt;
</code></pre></div>
<h3 dir="auto">Version</h3>
<p dir="auto">2.5.13</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://jsfiddle.net/jbwxeunb/1/" rel="nofollow">https://jsfiddle.net/jbwxeunb/1/</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<ol dir="auto">
<li>open console</li>
<li>click counter</li>
</ol>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">Show warning when mutating object prop</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">Warning only shows up when mutating primitive props</p>