[Vuejs]-V-for and computed properties calling methods

Answered on VueJS’s Gitter

HTML

<div id="el">
    <p>Total Chats: {{ totalChats }} ({{ unreadCount }} unread)</p>
    <button v-on:click="__addChat(true)">Add a Chat</button>
    <button v-on:click="__makeAllRead">Read All</button>

    <pre>{{ $data | json }}</pre>    

    <ul>
        <li v-for="chat in chats">
            <p>
                {{ chat.id }}
                <span v-if="chat.unread"><strong>(UNREAD)</strong></span>
            </p>
        </li>
    </ul>
</div>

Vue Code

var vm = new Vue({

    el: '#el',

    data: {

        nextID : 2,

        chats: {
            '6fc5gh4j3kl_FIRST': {
                id : 1,
                unread : true,
                body : Date(),
            }
        },

    },

    methods: {

        __addChat: function (unread) {

            var chat = {

                id : this.nextID++,
                unread : unread,
                body : Date(),

            };

            this.$set('chats.' + this.__makeHash(), chat);

        },

        __makeAllRead : function() {

            console.log(Object.keys(this.chats));

            for ( var key in this.chats ) {

                // if any tests are invalid
                if ( this.chats.hasOwnProperty(key) ) {

                    this.chats[key].unread = false;

                }

            }

        },

        __makeHash: function() {
            return 'fc5gh4j3kl1AZ0' + Math.floor((Math.random() * 100) + 1);
        },
    },

    ready: function() {
        this.__addChat(false);
    },

    computed: {
        totalChats: function() {
            var size = 0, key;
            for (key in this.chats) {
                if (this.chats.hasOwnProperty(key)) size++;
            }
            return size;
        },

        unreadCount: function () {

            var unread = 0;

            for ( var key in this.chats ) {

                // if any tests are invalid
                if ( this.chats.hasOwnProperty(key) && this.chats[key].unread ) {

                    unread++;

                }

            }

            return unread;

        }
    }
});