Why Slot props undefined when wrapped around v-if ?

[lou-theo]

Hello there!

Last week I posted this issue #6672 as it was recommended by a vuejs warning in devtools and @LinusBorg recommended to ask the question here instead.

He says the problem comes from line 35 where I "call the slot's function without an argument on line 35" but I'm a little confuse as I don't see any file with a line 35 which could be relevant in my reproduction link. So I guess he wanted to talk about line 15 in my tableDataComponent but again I have some troubles seing how rowcould be undefined (I already tested to wrap this line by v-if="row" and had no better results).

Can anyone help me understand what's wrong in my code ?
Thanks

[LinusBorg]

I'm sorry, it's line 31, not 35, in tableDataComponent.vue:

const hasActionSlot = computed(
  () => !!slots.action && slots.action().length > 0
);

[lou-theo]

Ok, I think I now understand. I read somewhere that you had to test !!slots.[slotName] && slots.[slotName]().length > 0 to correctly see if a slot is defined but I guess it is wrong, I now only run the first check and it works just fine as far as I can see.

I am still curious about this slot function as I hardly see information about it. I guess it's the render function of the slot or something like that? Can you tell me in what way I could use it or give me a link where I could find more informations?

Thanks for your time

[LinusBorg]

I am still curious about this slot function as I hardly see information about it. I guess it's the render function of the slot or something like that? Can you tell me in what way I could use it or give me a link where I could find more informations?

Templates are compiled to render functions, as you might be aware. And slots are passed from parent to child as functions. To render them, the child's render function calls these functions and passes the slot props as the argument.

I'd recommend to read the chapter on render function, specifically the sections about rendering and passing slots in render functions to get a better understanding about that.

https://vuejs.org/guide/extras/render-function.html#rendering-slots