Unshifting vs pushing on a v-for array

Question

I have a laravel-mix vuejs project

For some reason, I have a preview dialog that works by vanillajs instead of using vuetify or any other VueJS UI Framework.

How the preview dialog works:
1. A div with a class name of preview-dialog and a button with a class name of trigger-preview-dialog gets rendered in the DOM.
2. A script script called popup-dialog.js gets loaded and assigns default stylings(visibility: hidden) to preview-dialog class.
3. When the trigger-preview-dialog gets clicked, it changes the preview-dialog's visibility to visible.

Now, I have an array of post_list thats gets rendered by using v-for directive and its content is the preview-dialog. and I also have a function that appends new object to post_list.

what I noticed is that, when I use unshift when appending new object to the post_list, the preview_dialog of the newly added object works fine and opens up. But when I use push when appending a new object, the newly added object' preview_dialog does not open at all and what's worse is that there're no errors I found on the chrome inspector.

Can someone enlighten me on why unshift works but push doesn't? Thanks

Answer 1

It's all because of how vuejs track/observe object to be able to react to a change.

I would suggest to use the following syntax when working

• with array

  
  addItem (item) {
    this.items = [...this.items, item]

• with object

  
  updateItem (item) {
    this.item = Object.assign({}, this.item, item)
  }