[feature request] v-empty for v-for

It’s a common issue when rendering lists to show a message in case the list is empty. In Django, for example, {% for %} template tag supports {% empty %} for this:

{% for platform in game.platform_set.all %}       
    <td>{{ platform.system }} -- ${{ platform.price}}</td> 
{% empty %}
    <td>No Platforms</td>
{% endfor %}

Probably we could benefit from the similar feature in Vue.

There are cases with the list being contained inside an element to be hidden when the list is empty, and it works just fine with Vue if we want to hide the whole container:

<ul v-if="items.length">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>
<p v-else>Empty list</p>

When it’s not the case, however, the syntax is getting a little verbose. Emulating the Django example mentioned above:

<td v-for="platform in game.platforms" v-if="game.platforms.length">
  {{ platform.system }} -- ${{ platform.price }}
</td>
<td v-else>No Platforms</p>

we could benefit from a simplification, getting rid of expicit v-if:

<td v-for="platform in game.platforms">
  {{ platform.system }} -- ${{ platform.price }}
</td>
<td v-else>No Platforms</p>

UPD: v-empty could form a nice name as well, in case we’d like to avoid conflicts with existing v-else implementation.

[matthiasg]

@yyx990803 I am also concerned about enlarging APIs for convenience, but since v-for also handles the case of iteration through objects that aren’t arrays, I would indeed value a v-empty or v-for-empty directive. Iterating through e.g an objects properties does not have a direct length property etc. The fact that an iterator is empty seems very much symmetrical to v-if/v-else to me.

In my current case, I iterate through properties (easy with v-for) without necessarily needing to express in the template how the iterator is implemented. Since v-for has to iterate anyway, extending it to keep a boolean (empty/notempty) and rendering an ‘empty’ branch if the loop content was never touched after iteration should be helpful, straightforward and more performant than calling Object.keys(obj).length even if the template includes an understanding of the iterator implementation.

Empty Iterator branches also have precedence in all other template languages I used so far.

The current way seems quite clumsy (especially since it binds the template to an implementation detail of the iterator) and it won’t really get any better when using a component method on this either.

<section v-for="(part,key) of locals.missing">
  <h3>{{key}}</h3>
  <span>{{part}}</span>
</section>
<section v-if="Object.keys(locals.missing).length === 0">
  <span v-translate="vt>All translations available</span>
</section>

[matthiasg]

To be honest I would rather write:

<td v-for="item in items">{{ item.message }}</td>
<td v-empty>Empty list</td>

than

<template v-if="items.length">
  <td v-for="item in items">{{ item.message }}</td>
</template>
<td v-else>Empty list</td>