Updating arrays does not re-render in Vue even when using Vue.set

Question

I am having trouble editing items that are created by Vue, it always gets the wrong index of the item to replace when I am editing. I understand that Vue cannot react to certain changes like array length so I am using the methods suggested in the Vue docs

However these are not working either. I suspect it has something to do with my setup. Please see below.

NB

myData is an Object sent through as a prop.
This code works perfectly when pulling through data from an API (ie on static data where the index has not changed)
The object of the code below is to:
1. Add a child to an array
2. Edit that child by:
- finding the childs index by its' id
- replacing that child with a new object with the edited data
- currently the index of any added children is always 0 so it replaces the first child object in the array and not itself
The result is emitted to the main vue app, where it updates the myData value in Data, and feeds the data down to the children components via props

Adding an item

methods: {
      localSave() {
            const myLocalData = this.myData 
            const myChildrenLength = myLocalData.children.dependents.length
            const myChildren = {
                'id': myChildrenLength + 1,
                'fullName': this.childsFullName, 
                'gender': this.childsGender, 
                'dateOfBirth': this.childsYearOfBirth, 
                'parentage': this.childsParentage, 
                'isFinanciallyIndependent': this.childsDependency 
            }

            Vue.set(myLocalData.children.dependents, myChildrenLength, myChildren);

            localStorage.setItem('myData', JSON.stringify(myLocalData));
            this.$emit('send-local-data', myLocalData);
        }
}

Editing an item

methods: {
      localEditSave() {
            const myLocalData = this.myData;
            const myChild = {
                'id': this.childsId,
                'fullName': this.childsFullName, 
                'gender': this.childsGender, 
                'dateOfBirth': this.childsYearOfBirth, 
                'parentage': this.childsParentage, 
                'isFinanciallyIndependent': this.childsDependency 
            }

            const arrayPath = myLocalData.children.dependents;
            let removeIndex = arrayPath.map(function(item) { return item.id; }).indexOf( myChild.id );

            Vue.set(arrayPath, removeIndex, myChild);

            console.log('localEditSave removeIndex = ', removeIndex)

            localStorage.setItem('myData', JSON.stringify(myLocalData));
            this.$emit('send-local-data', myLocalData);
        },
    }

Rodney P. Barbati · Accepted Answer · 2018-07-26 17:47:51Z

Just based on what you have provided, it appears you may be working with a parent component that has a list of data, and are trying to manipulate the child items in child components.

In your code, you are doing some complex code to apparently find the index of the item you are editing (or trying to remove). The data belongs to the parent component, so all you should be doing is notifying the parent of the item to perform some function on.

This is most easily accomplished by providing the index to the child items when they are created and capturing the event emitted by the child - in the parent template...

v-for="(item, index) in itemList" index="index" v-on:DeleteItem="deleteItem(index)"

The child component does the following...

$emit("DeleteItem", this.index)

and that is all the code you need. No need to construct a temporary item, no need to search through all items - just tell the parent to delete the item at index n.

The same pattern should hold true for most other functions as well. Just keep in mind when writing your code that the list of data belongs to the parent component - you can't modify it in a child - i.e. you can't add or remove items from it in child code, all you can do is notify it that you want to modify it in some way.

A child can edit the data in an item because that is not modifying the list itself.

Another thing that might aid you in what you are doing is to provide a data model for your components. In that case, the model holds the data and the components all reference the same model - this can eliminate much of the complexity of dealing with parent/child data issues as all components have peer access to the same data.

Hope that helps.

UXCODA · Accepted Answer · 2018-06-27 03:01:38Z

0

So the problem was that I was submitting the id as text so when removeIndex was comparing item.id to myChild.id it was returning 0

I just changed

const myChild = {
      'id': this.childsId,

to

const myChild = {
      parseInt('id': this.childsId),

And it now works as expected.

answered Jun 27, 2018 at 3:01

UXCODA

1,2462 gold badges22 silver badges34 bronze badges

Collectives™ on Stack Overflow

Updating arrays does not re-render in Vue even when using Vue.set

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related