Displaying HTML if data is empty

Question

HTML:

<div id="demo">
    <h1>{{title | uppercase}}</h1>
    <ul>
        <li v-repeat="todos" v-on="click: done = !done" class="{{done ? 'done' : ''}}">
            {{content}}
        </li>
    </ul>
</div>

JS:

var demo = new Vue({
    el: '#demo',
    data: {
        title: 'todos',
        todos: [] //testing with data use: [{done:false,content:'testing'}]
    }
});

Or: http://jsfiddle.net/ksumarine/yMv7y/301/

I would like to display "No todos at this time" or something similar if the data comes back as empty. I can't figure out how to do this.

Also, when I have something similar to this in my app, I see the mustache bindings on the page before Vue replaces it with the data. Any thoughts on how to hide the bindings from the user?

Thanks for the help!

Evan You · Accepted Answer · 2015-02-27 21:58:55Z

12

You can use v-if="!todos.length" to make the message display only when the todos array is empty.

For the flash of bindings, use v-cloak together with a CSS rule to hide it until the compilation finishes.

Combined example: http://jsfiddle.net/yMv7y/304/

answered Feb 27, 2015 at 21:58

Evan You

2,7111 gold badge26 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Displaying HTML if data is empty

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related