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-26T06:20:27.507

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 '18 at 06:20

answered Apr 26 '18 at 06:14

user1496463

410
3
14

You're partially right. `this.items.pop()` does not modify this.originals though but elements inside are the same. – Antonio Laguna Apr 26 '18 at 07:39
`this.originals` and `this.items` refer to the same array. Wording were poor. :x – user1496463 Apr 26 '18 at 07:51
Thanks a lot for finding this! – Antonio Laguna Apr 26 '18 at 07:53
Have encountered this issue multiple times. JS although it doesnt have pointers, arrays and objects work similar to the concept of pointers. – user1496463 Apr 26 '18 at 07:55

Revert changes to array in Vue

1 Answers1