0

I am stuck with a nested for loop and a v-model inside it. I have no problems updating the data inside the first for-loop (row.amount), but when I change the input member.share for John in one row, all of John's shares are updated?

my component:

<div v-for="row in rows">
   …
   <input type="text" v-model="row.amount" />
   <div v-for="member in row.teams">
      <input type="text" v-model="member.share" />
   </div>
</div>

This is the data:

rows: [
{
    amount: 100,
    team: [
        {
            name: John,
            share: 0
        },
        {
            name: Jane,
            share: 0
        }
    ] 
},
{
    amount: 299,
    team: [
        {
            name: John,
            share: 0
        },
        {
            name: Jane,
            share: 0
        }
    ] 
}
]
Jannes
  • 11
  • 2
  • I cannot duplicate your problem. https://codepen.io/Kradek/pen/zpdzqK?editors=1010 – Bert Jan 03 '18 at 15:54
  • This is weird. Is there a difference between the data in a component and the data in the vue-app itself? This is the only difference I can see – Jannes Jan 03 '18 at 16:08
  • Data in a component should be a function that returns the data object, but otherwise no. I updated the pen to demonstrate. – Bert Jan 03 '18 at 16:10
  • Yes, i have it that way – Jannes Jan 03 '18 at 16:19

1 Answers1

1

Perhaps it is related to a typo:

You're looping through member in row.teams but there is no s in the json provided. Try replacing your loop for member in row.team.

Antony
  • 1,253
  • 11
  • 19