Vue.js 复杂物体的反应性

我对复杂的物体反应有问题。 我已经阅读了堆栈上的所有内容，以找到解决问题的方法，但没有任何效果。我已经研究了vuejs上的对象反应性和数组警告，但都不起作用。 所以我请求一些帮助

让我解释一下这个项目： 我有两个专栏： -在左侧，我对内容进行了CRUD -在右侧，我显示结果

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

单击事件时，我通过此方法添加一个新元素。一切都好，我可以积木一块

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树上的块

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

我正在添加一个小视频，这样你就可以看到发生了什么

我补充了一些解释。 我使用事件总线在我的组件之间进行通信，右侧使用它自己的对象

我不知道怎样才能解决这个问题。 如果需要更多信息，请告诉我。 谢谢大家!

编辑1: 我为每个块添加了一个id，以查看开始拖放时会发生什么情况。==>块正确移动。问题不是来自onDrop（）方法，而是来自我的嵌套组件，如果我理解得很好的话。它们不会更新。我将搜索这一新的问题

这是嵌套结构

sidebar.vue=>顶部容器

<Container
 :data-index="i"
 @drop="onDrop(i,$event)"
 :get-child-payload="itemIndex => getChildPayload(i, itemIndex)"
 lock-axis="y"
>
  <Draggable
   v-show="pagination.currentPage === i"
   v-for="(input, index) in slides[i].blocks"
   :key="index.uid"
   :id="'slideBlocksContainer'+index"
   class="item"
>
 blockId #{{input.uid}}
  <AppContainer
   v-if="input.type == 'text'"
   :blocType="input.type"
   :placeholder="input.content"
   :id="index"
   :slideId="i"
></AppContainer>

 </Draggable>
</Container>

块ID{{input.uid}
我已经更改了组件的键，现在，当我拖放元素时，它们会停留在被拖放的位置。
我还看到，AppElement输入与它们自己的AppContainer相关。所以现在一切都好了，但我不知道这是否是最佳实践
 问题似乎在于，您正在使用的平滑dnd库没有更新您要传递给它的块数组，它可能在内部制作数组的副本。因此，当您通过拖放更改块的位置时，您并没有更改块数组，只是更改内部副本

查看Smooth dnd文档，如果要访问修改后的阵列，可以尝试使用drag end事件处理程序：

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

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