Question

我有一个团队对象，其中包含all个团队的记录，也可以count和create个。我将所有团队存储为一个对象，因此我可以编写Teams.all["Team 1"]来选择一个名为＆＃34; Team 1＆＃34;的团队。

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;
  }
}

现在，我想循环使用它。

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

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

1 个答案: