Handling an empty list in Vue?

Hello all,

How would I handle an "empty" list when using v-repeat? I've had a look over the docs but can't seem to find anything.

<ul>
    <li v-repeat="profile: profiles | filterBy searchQuery">
        <!-- My code here prints the name -->
    </li>
</ul>

How would I then display a message saying something like "There are currently no profiles." when there aren't any?

Thanks in advance!

vitorarjol

10 years ago

Best Answer

Level 10

Hi @JoeDawson. Try this:

<ul>
    <li v-repeat="profile: profiles | filterBy searchQuery">
        
    </li>
    <li v-show="profiles.length == 0">
        Show your message here
    </li>
</ul>

joedawson

10 years ago

Level 18

@vitorarjol thanks buddy :)

1 like

Please or to participate in this conversation.