Problem with indexing children while running v-for directive

Question

As you will see bellow i'm v-foring on array form Store.

<q-tab-panel v-for="(detailGoal, index) in $store.state.documents[0].document.content.mainGoal.detailGoals" :key="index" :name="detailGoal.title">
        
  <div class="text-h6">{{detailGoal.title}}</div>
  <div>{{idx}}</div>

  <!-- jj. this is next component -->
  <goals-details :thisIndex="index"/>
      
</q-tab-panel>

I also have button that push new element to this array and it's work fine.

//.jj it's in mutations
      ADD_DETAIL_GOAL(store, detailGoal: detailGoal){
        if(store.documents){store.documents[0].document.content.mainGoal.detailGoals.push(detailGoal)}
      },

On refreshing the site i recived default number of children with correct propsed index'es but when i start to adding new children they show up but not with good idex'es Does any one had this problem? please help.

Answer 1

It's not a problem, it's just your lack of knowledge about programming. V-for loop index is completely different index then index in your array. Instead of using .push() method, use .unshift() method, and it should work. This is a quick fix to your problem. Instead, you should create your own ID for data in arrays because you might have problems with deleting correct documents in array. For example, you might have some getter or computed property with will sort the original array creating a new one and give it to v-for loop.