Search code examples
vue.jsvuejs2vuex

Vuejs v-for generate just one element after vuex state update


in Vue I am using vuex state for generating elements, it works when it runs for the first time but when I update Vuex state which I am using that for generating elements in v-for it doesnt generate more than one element!

this is my code:

<div v-for="(group, index) in $store.state.eventManagement.groupCount" v-bind:key="index" class="match">
  <div class="groupTitle">{{group}}</div>
  <div v-for="(team, teamIndex) in groupTeamCount" v-bind:key="teamIndex" class="teamName">
    (#{{ (groupTeamCount * index) + teamIndex+1 }}) <span v-if="seeds[(groupTeamCount * index) + teamIndex] !== ''">{{seeds[(groupTeamCount * index) + teamIndex].username}}</span>
    <div class="addSeed" v-on:click="changeSeedNumber((groupTeamCount * index) + teamIndex)">+</div>
  </div>    
</div>

What is wrong? What do you think?


Solution

  • Solved:

    The problem was because of input that is changing the value of groupCount state. Its a number type input, so I thought that it passes integer but it doesn't, it passes a string, thus v-for generates just one element. I used parseInt to solve this problem