v-for通过vue.js中的对象

我有一个团队对象，其中有一个all团队的记录，也可以是count和create他们。我将所有团队存储为一个对象，因此我可以编写Teams.all["Team 1"]以选择名称为“Team 1”的团队。v-for通过vue.js中的对象

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://rc.vuejs.org/guide/reactivity.html#Change-Detection-Caveats：因为您要添加的对象键将其...这里阅读本文档

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

来源

2016-10-03 Djave

你的球队状态不是反应。

使用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

来源

2016-10-03 17:24:58

v-for通过vue.js中的对象

回答

相关问题