Hi!
By accident and without realizing it, one of my client added a mark (internal link) to an empty space, resulting in a empty and, in my case, invisible <a href="/about"></a> on the front-end. However it is still focusable when tabbing.
Ideally, I don't want that link to be rendered at all. I was able to solve the problem with functional template components by checking for children[0] && children[0].text. Example:
However, for normal vue components, I only found convoluted ways and not clean and easy ways to check for empty slot. From what I understood "this.$slots.default[0]" is "false" at first and then "true", but it can't be track in a computed property because it's not reactive.
I was thinking, maybe we could add an option to this library for automatically hiding marks with empty text property?
Hi! By accident and without realizing it, one of my client added a mark (internal link) to an empty space, resulting in a empty and, in my case, invisible
<a href="/about"></a>
on the front-end. However it is still focusable when tabbing.Ideally, I don't want that link to be rendered at all. I was able to solve the problem with functional template components by checking for
children[0] && children[0].text
. Example:However, for normal vue components, I only found convoluted ways and not clean and easy ways to check for empty slot. From what I understood "this.$slots.default[0]" is "false" at first and then "true", but it can't be track in a computed property because it's not reactive.
I was thinking, maybe we could add an option to this library for automatically hiding marks with empty text property?