-
-
Notifications
You must be signed in to change notification settings - Fork 33.7k
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
class attribute ignored on functional components #7554
Comments
This is expected, you need to pass down the Vue.component("functional-comp", {
functional: true,
render(h, context) {
return h("div", context.data, "This should be .red");
}
}) I'm realising there's no note on the docs about this though. I'll create a PR |
Understood, thanks very much! |
@posva would you happen to know if this is possible with vue-loader?
|
I haven't written the code that handles functional components in vue-loader, I think it was @blake-newman |
is there any easy way to "intelligently merge" classes in the same way the docs mention normal components do? |
You can do it this way
|
I notice there's two data properties for classes <template functional>
<div
:class="[
data.class,
data.staticClass
]"
/>
</template> |
@VitorLuizC in terms of api - it's bad... |
@patriciussanctus Yeap, and same happens to You can see all data properties on VNodeData type defintion (or just console https://github.com/vuejs/vue/blob/4c98f9de39e18703ec3dbd05b596a1bbc3d0c8e3/types/vnode.d.ts#L44-L47 |
From the docs one would not expect the need to change the child component. I'm not too familiar with the internals here but from a users perspective being a functional component should not change the way Parent and child components interact. |
Render function example: render(createElement, { data } {
return createElement(
'div',
{
class: {
...(data.staticClass && {
[data.staticClass]: true,
})
},
attrs: {
...data.attrs,
}
}
)
} |
Version
2.5.13
Reproduction link
https://jsfiddle.net/zc3u69af/2/
Steps to reproduce
Create a functional component.
Render it in a parent component with some classes applied to it.
The classes won't be there.
What is expected?
I would have expected that the class attribute would be present in the DOM, like for regular stateful components.
What is actually happening?
The class attribute is lost and does not appear in the DOM.
I think this issue might be related vuejs/vue-loader#1136
The text was updated successfully, but these errors were encountered: