Check if slot is empty (options API)
What problem does this feature solve?
Using the options API, there is as far as I can tell, no elegant way of quickly deciding whether a slot is empty or has content. this.$slots.slotName()
always yields me an array with a top node of type Symbol(Fragment)
, whether the slot is empty or not. In order to figure out whether it truly is empty, I need to check for the length of the children of the node, such as:
this.$slots.slotName()[0].children.length
The way I understand this thread, the type of the top node seems to have changed during the life of Vue 3: https://forum.vuejs.org/t/how-to-determine-if-slot-is-empty-in-vue3/109154
What does the proposed API look like?
A function property on the $slots
object, e.g. this.$slots.isEmpty('slotName')
would seem more elegant to me, in order to achieve the same result as my example above.
Thank you for your quick answer.
https://github.com/vuejs/core/issues/4733#issuecomment-1024816095 seems like the most elegant solution to me, but I couldn't understand from the thread, if this is a feature that is wanted in the library, or rather not? As others mentioned in that thread, that's a fair bit of insider-APIs knowledge for a fairly basic task.