Subscribe on changes!

Empty v-for iteration: v-empty

avatar
Jan 20th 2021

EDIT If you find this issue, the discussion was moved to https://github.com/vuejs/rfcs/discussions/256

What problem does this feature solve?

For Vue 3 I would like to submit to your consideration a Vue 2 feature request that was rejected: vuejs/vue#4174

It's a simple way to have content when a v-for iteration is empty, which would work similarly to v-if / v-else. The original request called it v-empty but I don't care about its name.

It's nice sugar for something that is very common in UI, but more importantly it's hard to emulate when you are iterating over something that doesn't have a length, such as an iterator/generator.

You can see that even after being closed, comments of the original issues are getting a lot of thumbs up: Issue itself: 👍 16 https://github.com/vuejs/vue/issues/4174#issuecomment-388338342 👍 23 https://github.com/vuejs/vue/issues/4174#issuecomment-608024212 👍 13

What does the proposed API look like?

<template>
  <div v-for="x of iterator">{{ x }}</div>
  <div v-empty>Empty!</div>
<template>

Or any other name.

avatar
Jan 20th 2021

This is worth going through an RFC, can you open a discussion there or a proposal?