1
我試圖更新VueJS對象列表上的一些屬性，但我有一些小故障。v-for和計算屬性調用方法
這裏的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。
請問您，請告訴我我做錯了什麼？