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

v-for through an object in vue.js

本文关键字：对象 js 通过 vue V-for      更新时间：2023-09-26

我有一个Teams对象，它有all队的记录，也可以是count队和create队。我将所有的团队存储为一个对象，因此我可以编写Teams.all["Team 1"]来选择一个名称为"team 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

你的Teams状态不是响应的，因为你正在向它添加对象键…阅读这里的文档: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

相关文章：