Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scoped Slot warns when used inside of dynamic component on regular element #10152

Closed
MyBeta opened this issue Jun 13, 2019 · 4 comments · Fixed by #10167
Closed

Scoped Slot warns when used inside of dynamic component on regular element #10152

MyBeta opened this issue Jun 13, 2019 · 4 comments · Fixed by #10167

Comments

@MyBeta
Copy link

MyBeta commented Jun 13, 2019

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.

@posva
Copy link
Member

posva commented Jun 13, 2019

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>

@posva posva closed this as completed Jun 13, 2019
@MyBeta
Copy link
Author

MyBeta commented Jun 15, 2019

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!

@posva posva changed the title Unable to use scoped slots in component parsing caveat Scoped Slot warns when used inside of dynamic component on regular element Jun 18, 2019
@posva
Copy link
Member

posva commented Jun 18, 2019

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

@luckydonald
Copy link

What is the status of this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants