Vue slot is not working in rare and unpredictable cases (potential vue bug?)

Question

I have this weird bug with a slot that is unreliable in certain unknown cases.

Components

There are 3 hierarchical components.

• The grandchild (headlessTable), which offers a slot named arrayValue.
• The child (collapsableCard), which passes the slot between grandchild and parent.
• The parent (orderDataCard), who decides to render a link for that slot.

Problem: Instead of rendering the link of the parent, the default slot html of the child is being rendered when new data is loaded.

Datastructure (orderDetails)

• process (obj)
  • mark (string)
  • common (obj)
    • additionalArguments (array)
      • category (string)
      • type (string)
      • name (string)
      • value (string)
  • salesOrganisation (obj)
  • invoices (array)
    • invoiceAgreementId (string)
    • paymentType (string)

Reproduction

Stackblitz or Codesandbox

Please look at the field additionalArguments, it contains a link. Press ALT+M to simulate fetching new data. Now, instead of rendering a link, the default slot html for that named slot is rendered instead. You can press ALT+J to load the original data, but this time there's no link.

Initial data (ALT+J)	Loaded data (ALT+M)	Type	Equal value
	mark	str	false
common	common	obj	true
salesOrganisation	salesOrganisation	obj	true
invoices (empty)	invoices	arr	false

How 2 resolve

• if you uncomment line 68 in app.js (or line 73 in App.vue if you're on codesandbox), which is the field called mark
• if invoices is not initially empty in app.js
• if mark is removed from html in orderDataCard
• if salesOrganisation is removed from html in orderDataCard
• if the html in the v-for template section for invoiceItems is empty in orderDataCard

Obviously, these are not solutions.

Notes

In any case, there is no dependence or anything between any of the fields, so it's hard for me to understand why this happens and I suspect this to be a bug with vue. I already created an issue for this. However, devs won't look at the reproduction, because they think it's not minimal as #lines > 100. As soon as I delete any more meaningful lines, the bug is resolved and the removed code is not faulty, so it's very frustrating to work on this. I could still remove lines that are not meaningful, but that would make it more difficult for everyone involved to understand what data is being rendered.

Is anyone able to acknowledge the fact that this is a problem with vue and that the code is not reducible OR (I would prefer this) is anyone able to fix this?

Answer 1

This may not be the solution, but could help find it:

Objects

I noticed you are working with objects and turning them into arrays. Objects properties can be problematic to work with, because unlike arrays updated properties are not propagated. This is a problem with JavaScript, not Vue. Vue was only possible because of observers introduced, but objects are still not part of that.

You might run into problems when an object is partially updated.

I would suggest looking at Vue.set.
Old code of mine invokes it explicitly by window.Vue.set() for changes in object properties so Vue can propagate them correctly.

That is kind of a bug in Vue, but again stems from JavaScript itself.

Computed arrays

I'm not entirely sure but the computed arrays don't save the above issue with working with objects.
I would go the safe route and use Vue.set() when updating objects and object properties. You can still use the computed arrays then.

Otherwise the obvious: Make real arrays out of the objects instead of working with objects half the time.

this.process

Is there a good reason you are using this.process explicitly instead of the component's props? Or is that a component from a library?

Slots

Have you tried the exact same code but without using the collapsable-card? Just output the link itself? It might point to slot problems in the collapsable-card component. Maybe also partially because of the objects thing from above.

Answer 2

The problem is linked to Vue handling of multiple instances of the same component. In OrderDataCard.vue you have two instances of Collapsable-Card without unique keys. In this case:

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

I don't quite know how these algorithms work, and why, apparently, it reused the second instance (without a defined slot content), but, setting a unique key for these components solved the issue.

See the working code sandbox: https://codesandbox.io/s/admiring-hamilton-5ytpp?file=/src/components/OrderDataCard.vue:133-149.

Note: I couldn't trigger keyboard events in my browser, so I triggered them on button click.