Revert changes to array in Vue

Question

I'm trying to have a component which can change some elements in it. In reality, a change will be like swapping the object in a given position. I did some POC and tried to do the reverting method to be able to leave it how it was before.

export default {
  name: 'Landing',
  data () {
    return {
      items: [
        {
          id: 1,
          category: 'Something something'
        },
        {
          id: 2,
          category: 'Something something'
        }
      ]
    };
  },
  created() {
    this.originals = this.items.slice(0);
  },
  methods: {
    change() {
      this.items[0].category = 'Changed';
    },
    revert() {
      // ??
    }
  }
};

I've tried a couple of things especially after reading this: https://vuejs.org/2016/02/06/common-gotchas/#Why-isn%E2%80%99t-the-DOM-updating

while (this.snacks.length) {
  this.items.pop();
}

this.originals.slice(0).forEach(o => this.items.push(o));

But it doesn't work. If I delete the pushing part, I get an empty list correctly but if I try somehow to push it back, it won't work.

What am I missing here?

user1496463 · Accepted Answer · 2018-04-26 06:20:27Z

2

If you give a working fiddle I can show you what happened.

Basically, because you are modifying the same array object. this.originals refers to the same array as this.items

Slice returns a shallow copy of the object. You should either take a deep copy or your revert should be the one initializing the object.

this.items.pop(); will remove the items from this.originals as well.

edited Apr 26, 2018 at 6:20

answered Apr 26, 2018 at 6:14

user1496463

4103 silver badges14 bronze badges

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

4 Comments

Antonio Laguna Over a year ago

You're partially right. this.items.pop() does not modify this.originals though but elements inside are the same.

user1496463 Over a year ago

this.originals and this.items refer to the same array. Wording were poor. :x

Antonio Laguna Over a year ago

Thanks a lot for finding this!

user1496463 Over a year ago

Have encountered this issue multiple times. JS although it doesnt have pointers, arrays and objects work similar to the concept of pointers.

Collectives™ on Stack Overflow

Revert changes to array in Vue

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related