CODEWITHSUNDEEP
javascriptvue.js
Djave
Djave

Reputation: 9329

v-for through an object in vue.js

I have a Teams object, which has a record of all teams and can also count and create them. I store all teams as an object, so I can write Teams.all["Team 1"] to select a team with a name of "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;
  }
}

Now in vue I'd like to loop through this.

main.js

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

And then this doesn't work (obviously):

index.html

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

So my next guess was to go like this:

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>

But that doesn't work either. Is there a way to loop through the properties of an object in Vue?

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

Upvotes: 0

Views: 228

Answers (1)

Primoz Rome
Primoz Rome

Reputation: 11021

Your Teams state is not reactive because you are adding object keys to it... Read this docs here: http://rc.vuejs.org/guide/reactivity.html#Change-Detection-Caveats.

Use this.$set(this.someObject, 'b', 2) if you want to add properties to your state object or those won't be reactive and trigger view update.

Also not sure why you complicate so much :). Try this:

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>

Demo here: http://codepen.io/anon/pen/qaVbym

Upvotes: 2

Related Questions