v-for和computed属性调用方法

Question

我正在尝试更新VueJS对象列表中的某些属性，但是我遇到了一些问题。

这是HTML：

<div id="el">
    <p>Total Chats: {{ chats.length }} ({{ 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>
                Message {{ chat.id }}
                <span v-if="chat.unread"><strong>(UNREAD)</strong></span>
            </p>
        </li>
    </ul>
</div>

Vue代码：

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.chats[this.__makeHash()] = chat;

            console.log(this.chats);
        },

        __makeAllRead : function() {

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

            for ( var key in Object.keys(this.chats) ) {

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

                    this.chats[key] = true;

                }

            }

        },

        __countUnread : function() {

            var unread = 0;

            for ( var key in Object.keys(this.chats) ) {

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

                    unread++;

                }

            }

            return unread;

        },

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

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

    computed: {
        unreadCount: function () {
            console.log('counting...');
            return this.countUnread();
        }
    }
});

这是一个小提琴：http://jsfiddle.net/522aw2n5/7/

我无法理解/修复此代码的事情：

1）使用方法更新计数的计算属性

2）它仅显示手动创建的对象，而不显示动态对象。

3）我无法通过点击按钮来阅读所有信息。

这是Vue 1.0.0 RC2。

请你告诉我，我做错了什么？

Answer 1

回答VueJS的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;

        }
    }
});