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

kebab case props on slots are not transformed to camelcase #2488

Closed
zigomir opened this issue Oct 26, 2020 · 4 comments · Fixed by #2490
Closed

kebab case props on slots are not transformed to camelcase #2488

zigomir opened this issue Oct 26, 2020 · 4 comments · Fixed by #2490
Labels
has PR A pull request has already been submitted to solve the issue has workaround A workaround has been found to avoid the problem 🐞 bug Something isn't working

Comments

@zigomir
Copy link

zigomir commented Oct 26, 2020

Version

3.0.2

Reproduction link

https://codesandbox.io/s/vue-3-slot-props-cl5xj?file=/src/App.vue

Steps to reproduce

Open https://codesandbox.io/s/vue-3-slot-props-cl5xj?file=/src/App.vue and you'll see that <template #object> slot will render value of props.hasBeenClicked. Clicking on "Click me" button also works as expected and re-renders new value.

Nothing of this works when I use boolean value directly. Same goes for string and maybe other primitive type values.

What is expected?

Boolean prop should work same as object prop. I'd expect it to work same as in Vue 2: https://codesandbox.io/s/vue-2-slot-props-rv3vb?file=/src/App.vue

What is actually happening?

Boolean and string props don't work until they are wrapped in an object.

@posva
Copy link
Member

posva commented Oct 26, 2020

It looks like a casing problem, using <slot name="boolean" :hasBeenClicked="hasBeenClicked"></slot> works

@posva posva added 🐞 bug Something isn't working has workaround A workaround has been found to avoid the problem labels Oct 26, 2020
@posva posva changed the title Slot props boolean not working as expected while object works fine kebab case props on slots are not transformed to camelcase Oct 26, 2020
@zigomir
Copy link
Author

zigomir commented Oct 26, 2020

@posva I see. Actually very similar issue happens with $emit() – please see this sandbox & open console. I suspect it will be fixed in same PR so I didn't open new issue.

@posva
Copy link
Member

posva commented Oct 26, 2020

There is already another issue opened about events casing I think

@zigomir
Copy link
Author

zigomir commented Oct 26, 2020

For posterity: $emit is fixed when you use latest @vue/compiler-sfc as described in #2429

@LinusBorg LinusBorg added the has PR A pull request has already been submitted to solve the issue label Oct 28, 2020
edison1105 added a commit to edison1105/vuejs-core that referenced this issue Nov 10, 2020
edison1105 added a commit to edison1105/vuejs-core that referenced this issue Nov 10, 2020
edison1105 added a commit to edison1105/vuejs-core that referenced this issue Nov 10, 2020
edison1105 added a commit to edison1105/vuejs-core that referenced this issue Nov 10, 2020
edison1105 added a commit to edison1105/vuejs-core that referenced this issue Nov 10, 2020
edison1105 added a commit to edison1105/vuejs-core that referenced this issue Nov 10, 2020
edison1105 added a commit to edison1105/vuejs-core that referenced this issue Nov 10, 2020
edison1105 added a commit to edison1105/vuejs-core that referenced this issue Nov 10, 2020
@github-actions github-actions bot locked and limited conversation to collaborators Oct 31, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
has PR A pull request has already been submitted to solve the issue has workaround A workaround has been found to avoid the problem 🐞 bug Something isn't working
Projects
None yet
3 participants