Vue: Scoped Slot warns when used inside of dynamic component on regular element

Created on 13 Jun 2019  ·  4Comments  ·  Source: vuejs/vue

Version

2.6.10

Reproduction link

https://jsfiddle.net/mybeta/1dfwsazn/

Steps to reproduce

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>

What is expected?

No warning.

What is actually happening?

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.

bug contribution welcome good first issue has PR warnings

Most helpful comment

I updated my comment but the warning seems to appear anyway, the warning shouldn't appear indeed

All 4 comments

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?

Was this page helpful?
0 / 5 - 0 ratings