复杂对象的对象反应性

Question

我对复杂的对象反应性有疑问。我已经阅读了所有可以在堆栈上找到的解决方法，但是没有任何效果。我已经看过vuejs上的对象reactvity和数组警告，但是两者都不起作用。因此，我想寻求帮助。

让我解释一下该项目：我有2栏：-在左侧，我欺骗了我的内容-在右侧，我显示结果

我有我的对象，并在其“块”属性上添加了新元素（文本，图像等...）

[
  {
    "uid": 1573224607087,
    "animation": "animationName",
    "background": {
      "bckColor": "#ff55ee",
      ...
    },
    "blocks": []
  }
]

点击事件中，我通过此方法添加了一个新元素。一切正常，我可以阻止一个区块。

addBloc(el) {
   if (el.type == "text") {
        const datasA = {
          type: "text",
          uid: Date.now(),
          slideId: this.pagination.currentPage,
          content: el.content,
          css: {
            color: "#373737",
            ...
          },
      ...
        };
        this.slides[this.pagination.currentPage].blocks.push(datasA);
        this.$bus.$emit("newElement", datasA);
}

为了在显示侧修改元素的顺序，我添加了一个拖放模块以将块移动到DOM树上。 Smooth dnd

问题是，当我拖放元素时，我的对象已正确更新，但DOM没有更新。拖动的元素返回其初始位置。奇怪的是，当我尝试修改块（我拖动的块）时，它修改了另一个块。

我正在添加一个小型视频，以便您可以看到发生了什么。

Small animation to show you what's going on

我添加了更多说明。我使用事件总线在组件之间进行通信，而右侧则使用其自己的对象！

我不知道如何解决这个问题。告诉我您是否需要更多信息。谢谢大家！

Answer 1

问题似乎是您正在使用的Smooth dnd库没有更新要传递给它的块数组，可能是在内部复制该数组。因此，当您通过拖放来更改块的位置时，您并没有更改块数组，而只是内部副本。

查看Smooth dnd文档，如果您想访问修改后的数组，则可以尝试使用drag-end事件处理程序：

onDragEnd (dragResult) {
  const { isSource, payload, willAcceptDrop } = dragResult
}