vue.jsのオブジェクトを介したv-for

Question

私はallチームの記録を持ち、countとcreateのチームオブジェクトを持っています。すべてのチームをオブジェクトとして保存するので、Teams.all["Team 1"]と書いて、「チーム1」という名前のチームを選択することができます。

Teams.js

var Teams = { 
    all: {}, 
    create: function(teamName) { 
    var key = 'Team ' + this.count(); 
    this.all[key] = { 
     'name': teamName, 
     'score': 0 
    }; 
    }, 
    count: function() { 
    var total = 0; 
    for(var team in this.all){ 
     if(this.all.hasOwnProperty(team)){ 
     total ++; 
     } 
    } 
    return total; 
    } 
} 

今VUEで、私はこのループスルーしたいと思います。

main.js

var vueApp = new Vue({ 
    el: '#app', 
    data: { 
     'Teams' : Teams 
    }, 
    methods : { 
     createTeam : function(){ 
      Teams.create('Team ' + (Teams.count() + 1)); 
     } 
    } 
}); 

そして、これは（明らかに）動作しません。

index.htmlを

<div id="app"> 
    <ul> 
    <li v-for="team in Teams.all">{{ team.name }}</li> 
    </ul> 
    <button @click="createTeam">Create team</button> 
</div> 

だから、私の次の推測が行くことでしたこのように：

index.htmlを

<div id="app"> 
    <ul> 
    <li v-for="team in Teams.all">{{ Teams.all[team].name }}</li> 
    </ul> 
    <button @click="createTeam">Create team</button> 
</div> 

しかし、それはどちらか動作しません。 Vueでオブジェクトのプロパティをループする方法はありますか？

http://codepen.io/EightArmsHQ/pen/wzPKxA

Answer 1

あなたはそれにオブジェクトキーを追加しているので、あなたのチーム状態は反応しない...ここに、このドキュメントを読む：http://rc.vuejs.org/guide/reactivity.html#Change-Detection-Caveats。

状態オブジェクトにプロパティを追加する場合、または反応しないでビューの更新をトリガーする場合は、this.$set(this.someObject, 'b', 2)を使用します。

なぜあなたがそれほど複雑であるかもわかりません:)。これを試してみてください：ここ

var vueApp = new Vue({ 
    el: '#app', 
    data: { 
    teams: [] 
    }, 
    methods: { 
    addTeam: function() { 
     this.teams.push({ 
     name: 'Team ' + this.teams.length, 
     score: 0 
     }) 
    } 
    } 
}); 

---

<div id="app"> 
    <ul> 
    <li v-for="team in teams"> 
     {{ team.name }} 
    </li> 
    </ul> 
    <button @click="addTeam">Create team</button> 
</div> 

デモ：http://codepen.io/anon/pen/qaVbym