Vue.js - Nested field array refreshes with incorrect data

Question

I am trying to create a Vue page that contains nested field collections. I.e. Parent form and repeatable child forms.

It works with the exception that when deleting a child form, the template renders incorrectly

Please see the fiddle example that I created - https://jsfiddle.net/c4marcus/1mu2oceb/8/

The sample data contains basic information for The Beatles. If you click the trash can next to "Ringo" then mistakenly "George" will disappear and not "Ringo".

However, when you click submit the correct data is being saved (see screenshot below).

I feel like the problem must lie with the MemberFormset vue component's remove method which is triggered by clicking the trash can button.

remove: function(index) {
    this.members.splice(index, 1)
    this.$emit('input', this.members)
},

Once spliced, the template should render the array of forms with the new data.

<div class="form-group" v-for="(member, index) in members">
    <member-form :model="member"
                 :index="index"
                 @input="update(index, $event)">

        <div slot="trash">
            <button type="button"
                    class="btn btn-default margin-top-md"
                    @click="remove(index)">

                <i class="fa fa-trash"></i>
            </button>
        </div>

    </member-form>

    <hr v-if="separator(index)" />
</div>

Rather than giving the whole code in your fiddle, you should try to get a minimal reproducible example that reproduce your error. I'll still give it a try though — Ulysse BN
– Ulysse BN, Commented Aug 17, 2017 at 18:06
Thank you, I'll try to trim it down soon as a moment frees up. — pymarco
– pymarco, Commented Aug 17, 2017 at 18:14
FWIW, having a fiddle makes a world of difference! Thank you for making it. — Bert
– Bert, Commented Aug 17, 2017 at 18:48

tony19 · Accepted Answer · 2022-07-15 22:35:11Z

2

The main issue appears to be here:

 <member-form :model="member"
              :index="index"
              @input="update(index, $event)">

You need to provide a key for the custom component included in your loop. In this case you are not directly iterating on the custom component, but providing a key to Vue helps it determine it's strategy to update the DOM. To that end I added an id to each member object

members: [
  {name: 'John', id: 1},
  {name: 'Ringo', id: 2},
  {name: 'Paul', id: 3},
  {name: 'George', id: 4}
]

and updated the template to this:

 <member-form :model="member"
              :index="index"
              @input="update(index, $event)"
              :key="member.id">

One more thing, as pointed out in the comments, your add method needs to be updated to add a new id value.

add: function () {
  const newId = Math.max(this.members.map(m => m.id)) + 1
  this.members.push({name: null, id: newId})
},

Now your DOM is properly updated after a delete.

Here is the updated fiddle.

I noted a few things looking over some of the code that look like they fall into some Vue caveats. This code for example:

update: function(index, value) {
  this.members[index] = value
  this.$emit('input', this.members)
},

Looks like it would fall into Vue's array detection caveat. And althought it might not be causing issues right now, potentially might in the future.

edited Jul 15, 2022 at 22:35

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 17, 2017 at 18:15

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ulysse BN Over a year ago

It is not if you use the add member button and then delete again. Because when add is triggered no id is given (maybe this.members.push({ id: generateId() } would work)

Bert Over a year ago

@UlysseBN True, because a new id is not generated in his add method. I went ahead and updated that. There are a few other things that look like they call into weird areas, but I didn't try to fix all the code.

Ulysse BN Over a year ago

My approach for generating ID would have been to keep a running index but this is ok too, +1

pymarco Over a year ago

Wow, thank you so much Bert! It hadn't crossed my mind to check the v-for docs, just wasn't expecting it.

pymarco Over a year ago

And thank you both for the additional help too! I'm trying to rapidly learn Vue and still have lots of detail to soak up.

Collectives™ on Stack Overflow

Vue.js - Nested field array refreshes with incorrect data

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related