2.6.10
https://jsfiddle.net/mybeta/1dfwsazn/
When I use DOM Template Parsing Caveats to add a component (e.g. <tr is="custom-row">
) I can't use scoped slots (slotProps) without receiving a warning in the console. I would like to use it this way:
<tr is="custom-row" v-slot="slotProps">
slotProps: {{slotProps.test}}
</tr>
No warning.
I get the following warning in the console.
[Vue warn]: Error compiling template: v-slot can only be used on components or <template>.
The rest looks like it works as expected.
As the warning says v-slot
can only be used on the wrapper components or nested in the component itself but on a template
tag.
Previously, slot-scope
would allow this usage but it was removed, you can check out the RFC: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot-syntax.md.
If you only have one scoped slot, you should be able to do
<tr :is="customComp" v-slot="data"></tr>
Hi @posva , thanks a lot for your comment!
As suggested, I have also tried to use v-slot
nested inside a template
tag, something like the below.
<div is="test-component">
<template v-slot:default="slotProps">
slotProps: {{slotProps.test}}
</template>
</div>
However that produces a warning as well, see fiddle:
https://jsfiddle.net/mybeta/bhcoLwu3/
When avoiding the DOM template parsing caveats, it works just fine:
<test-component>
<template v-slot:default="slotProps">
slotProps: {{slotProps.test}}
</template>
</test-component>
but I believe I need to use the caveat, when using the component on a tr
tag.
Also, would you mind explaining this comment a bit more?
If you only have one scoped slot, you should be able to do `
Thanks!
I updated my comment but the warning seems to appear anyway, the warning shouldn't appear indeed
What is the status of this?
Most helpful comment
I updated my comment but the warning seems to appear anyway, the warning shouldn't appear indeed