[feature request] v-empty for v-for

[gbezyuk]

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.

[posva]

I prefer the explicit ways, especially if your v-if depends upon another condition:

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

I'd rather create another directive v-empty to handle that syntactic sugar 🙂

[gbezyuk]

@posva, my vote for v-empty

[posva]

@gbezyuk I was, however suggesting you to create it as a separate package 😛 . IMO the benefits are not enough to include it in the core

[gbezyuk]

@posva, well, right now I just sorta raise the idea for a discussion =)
I agree that it's not something really important. Currently I have other tasks, but maybe somebody else would like to implement this feature.

[dsonet]

I would rather use the v-else with v-if.
v-empty or v-else with v-for is not that easy to understand.
keep it simple stupid.

[yyx990803]

I agree with @dsonet - I'm not fond of the idea of introducing special behavior directives when you can simply do v-if="!arr.length" - a dedicated directive may save a few keystrokes, but at the cost of explicitness, and requires you to backtrack for the corresponding v-for to be sure of what it does.

[juanr2001]

@yyx990803 I have a question. Which takes more precedence v-else with v-for

<h1 v-if="typeof obj === 'string">Show string</h1>
<h1
v-else
v-for="i in obj"
:keys="i.id
>{{i}}</h1>

How does Vue handle this situation? Do you recommend this?

[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>