Vue: Else statement for v-for directive

[bartlomieju]

First of all huge thanks Evan! Vue's great!

To the point: I am developing app that uses many lists. Those list are often filtered by user input. Before switching to Vue I used plain Django templates, and relied heavily on {% empty %} tag.

Unfortunately there is no such directive in Vue core. In my opinion it would be incredibly awesome and handy to be able to write:

Have you ever thought about implementing it? What's your opinion?

[yyx990803]

You can use a custom filter to "record" the length of the filtered result:

Vue.filter('recordLength', function (result, key) {
  this.$set(key, result.length)
})

<li v-for="product in products | filterBy q in 'name' | orderBy sortKey sortOrder | recordLength 'productCount'">
</li>
<li v-if="!productCount">
    There are no products matching your query
</li>

[bartlomieju]

Thanks for the answer! Yeah sure, I already used that a couple times. Why do you think it is not a good idea to implement?

[neitanod]

I second that!

[shadoWalker89]

@yyx990803 Shouldn't the recordLength filter return the result ?

I'm using vue 1.0.26 and if i don't return the result from the filter nothing appears on the screen.

[LinusBorg]

@shadoWalker89 indeed.

Vue.filter('recordLength', function (result, key) {
  this.$set(key, result.length)
  return result
})

[joshtipton28]

How can you display the value of the number of results? I tried {{productCount}} or {{productCount.length}} but both displays nothing.

[GioLogist]

This answer doesn't seem to work anymore. Is there a new way of accomplishing this?

[salvisb]

@GioLogist did you find a solution?