0

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

4

1 回答 1

0

这完全是因为 vuejs 如何跟踪/观察对象能够对变化做出反应。

我建议在工作时使用以下语法

  • 带数组
  
  addItem (item) {
    this.items = [...this.items, item]
  • 有对象
  
  updateItem (item) {
    this.item = Object.assign({}, this.item, item)
  }
于 2021-02-26T10:22:47.000 回答