Question

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

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

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

[
  {
    "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

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

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

编辑1： 我向每个块添加了一个ID，以查看启动“拖放”时会发生什么。 ==>块正在正确移动。问题不是来自onDrop（）方法，而是来自我嵌套的组件（如果我理解得很好）。他们不会更新。我将搜索这个新问题。

I've added a new gif to show what's going on.

这是嵌套结构

TheSidebar.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>

然后我有我的AppContainer.vue文件，它是顶级文件。在这里，我有每种输入类型的特定元素我有AppElement.vue文件，这是常见元素，我可以在任何地方使用

类似这样的东西

边栏

-AppContainer

---- AppElement

不知道，如何强制vue更新AppContainer.vue和AppElement.vue

编辑2： 如建议in this article所示，我更改了组件的键，现在，当我拖放元素时，它们将保留在放置它们的位置。我还看到的是AppElement输入与它们自己的AppContainer相关。所以现在一切都很好，但是我不知道这是否是最佳实践。

Answer 1

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

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

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

复杂对象的对象反应性

1 个答案: