[Vuejs]-V-for through an object in vue.js

by

2👍

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

👤Primoz Rome

Leave a comment