vue.js - Vue 插槽在罕见且不可预测的情况下不起作用(潜在的 vue 错误？)

Question

我有一个在某些未知情况下不可靠的插槽的奇怪错误。
成分
有3个层次组件。

孙子 (headlessTable)，它提供一个名为 arrayValue 的插槽.

子项 (collapsableCard)，它通过孙子和父项之间的插槽。

父级 (orderDataCard)，决定呈现该插槽的链接。

问题:不是渲染父链接，而是渲染子的默认插槽 html 加载新数据时 .
数据结构(orderDetails)

过程(对象)

标记(字符串)

常见的(对象)

附加参数(数组)

类别(字符串)

类型(字符串)

名称(字符串)

值(字符串)

销售组织 (obj)

发票(数组)

invoiceAgreementId(字符串)

付款类型(字符串)

再生产
Stackblitz或 Codesandbox
请看字段 additionalArguments ，它包含一个链接。
按 ALT+M 模拟获取新数据。现在，不是呈现链接，而是呈现该命名插槽的默认插槽 html。
您可以按 ALT+J 加载原始数据，但这次没有链接。


初始数据 (ALT+J)
加载的数据 (ALT+M)
类型
等值



标记
字符串
错误的

常见的
常见的
对象
真的

销售组织
销售组织
对象
真的

发票(空)
发票
阿尔
错误的

2如何解决

如果您取消注释 app.js 中的第 68 行(如果您使用的是代码和框，则取消注释 App.vue 中的第 73 行)，这是名为 mark 的字段

如果 invoices app.js 中最初不是空的

如果 mark从 html 中删除 orderDataCard

如果 salesOrganisation从 html 中删除 orderDataCard

如果 invoiceItems 的 v-for 模板部分中的 html订单数据卡中为空

显然，这些是 不是 解决方案。
笔记
无论如何，任何字段之间都没有依赖关系或任何东西，所以我很难理解为什么会发生这种情况，我怀疑这是 vue.js 的一个错误。我已经创建了一个 issue为了这。但是，开发人员不会考虑复制，因为他们认为 #lines > 100 并不是最小的。一旦我删除任何更有意义的行，错误就会解决并且删除的代码没有错误，因此非常令人沮丧这方面的工作。我仍然可以删除没有意义的行，但这会使所有相关人员更难以理解正在呈现的数据。
有没有人能够承认这是 vue 的一个问题并且代码是不可简化的，或者(我更喜欢这个)是否有人能够解决这个问题？

Answer 1

该问题与 Vue 处理同一组件的多个实例有关。在 OrderDataCard.vue你有两个 Collapsable-Card 的实例没有唯一键。在这种情况下:

Vue uses an algorithm that minimizes element movement and tries topatch/reuse elements of the same type in-place as much as possible.

我不太清楚这些算法是如何工作的，以及为什么，显然，它重用了第二个实例(没有定义的插槽内容)，但是，为这些组件设置一个唯一的键解决了这个问题。
查看工作代码沙箱: https://codesandbox.io/s/admiring-hamilton-5ytpp?file=/src/components/OrderDataCard.vue:133-149 .
注意:我无法在浏览器中触发键盘事件，因此我在单击按钮时触发了它们。