-
-
Notifications
You must be signed in to change notification settings - Fork 33.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[feature request] v-empty for v-for #4174
Comments
I prefer the explicit ways, especially if your <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 |
@posva, my vote for |
@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 |
@posva, well, right now I just sorta raise the idea for a discussion =) |
I would rather use the v-else with v-if. |
I agree with @dsonet - I'm not fond of the idea of introducing special behavior directives when you can simply do |
@yyx990803 I have a question. Which takes more precedence v-else with v-for
How does Vue handle this situation? Do you recommend this? |
@yyx990803 I am also concerned about enlarging APIs for convenience, but since In my current case, I iterate through properties (easy with 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.
|
Sorry to revive a dead issue 🧟♂️ This is not just convenience as pointed in the previous comment (that has 19 👍) In addition to ranges and objects previously mentionned: modern JS uses Iterables for several things, e.g.
Built-in support could do this with a simple syntax, without adding new watchers, nor running iterators a second time. This is even more an issue if you try to create a generic list component. <template>
<div v-for='item in items' v-slot='item'>
<slot />
</div>
<div v-if='ouch'> Empty! </div> Try to support binding anything v-for accepts into
EDIT I'm gonna add one bit: because |
I'm actually surprised this hasn't been implemented. If you look at other templating languages it is a common feature. |
I've read through this a few times and I personally don't think <!-- Option 1 -->
<template v-if="items.length">
<td v-for="item in items">{{ item.message }}</td>
</template>
<td v-else>Empty list</td> (See: Conditional Groups with When the occasion calls for a proper wrapping element, you just need to change the <!-- Option 2 -->
<ul v-if="items.length">
<li v-for="item in items">{{ item.message }}</li>
</ul>
<div v-else>Empty list</div> Every loop in every codebase I manage falls in to one of these two options. I understand that other template languages have an |
To be honest I would rather write:
than
|
@sirlancelot Now what about an iterable/generator object? That doesn't have a length. |
@jods4 iterators usually have state and would need to be recreated every time it renders (e.g. as an output of a computed property or function) I would advise against doing that anyway. But it is correct that those would have a length of course, whether they should be supported at all is a different matter (could lead to weird mistakes) |
This nice bit of syntactic sugar is an odd thing not to have imo. Apart from issues where it has direct utility, e.g.:
...It also has value as a way of nudging one towards best practice. @sirlancelot said that any time he thought he needed And of course @sirlancelot 's ‘Option 1’ is exactly equivalent to the function of (I do agree that no new syntax is called for to simplify @sirlancelot 's ‘Option 2’; that looks the way it should. I don't see how it could be abbreviated in a way that's worthwhile.) I'll also add that given how many template languages do have a feature like this, the absence of such a feature in Vue becomes confusing. I mean, that's how I wound up here. |
This create more useles template nesting and is different from most other templating language (Twig, Blade, Handlebar, etc). I think you should reconsider. |
It's indeed sad that this request is closed:
@yyx990803 please consider re-opening this issue. |
The vue community and core team are very much focused on keeping the API simple and I respect that very much. Nonetheless the implementation effort of a v-empty directive is so minutive and the benefit of aligning with common expectations coming from other template approaches in addition to keeping the template itself simple and structured should outweigh these hesitations. If it is just a resource issue I would understand that and the team could ask for a PR including commitment to include changes to docs and tests of course. That would be understandable. The fastify team does that often and it is a good approach to judge actual desire of people to get a feature. If it is a philosophical issue I cannot follow it. |
I first fell in love with for-else loop when I was introduced to it in Python. I switched to Vue as my framework of choice because of the pure simplicity of it's syntax in many places where other frameworks did little to simplify things. Hence, it was disappointing to find out that not only does Vue not have this loop built in (which I guess is understandable considering this loop is not mainstream), but Vue has failed to entertain this feature request so far. It is disappointing to see this issue marked as closed |
@SyedHusaini @mrleblanc101 @MattiasMartens and anyone who would still like to have this: |
@jods4 Thanks. I guess my reflex is to come to this repo since I use Nuxt which is still Vue 2 based for now. |
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: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:
When it's not the case, however, the syntax is getting a little verbose. Emulating the Django example mentioned above:
we could benefit from a simplification, getting rid of expicit
v-if
:UPD:
v-empty
could form a nice name as well, in case we'd like to avoid conflicts with existingv-else
implementation.The text was updated successfully, but these errors were encountered: