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

class attribute ignored on functional components #7554

Closed
davidhewitt opened this issue Jan 29, 2018 · 10 comments

Comments

@davidhewitt
Copy link

commented Jan 29, 2018

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

@posva

This comment has been minimized.

Copy link
Member

commented Jan 29, 2018

This is expected, you need to pass down the data object yourself:

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

@davidhewitt

This comment has been minimized.

Copy link
Author

commented Jan 29, 2018

Understood, thanks very much!

@davidhewitt

This comment has been minimized.

Copy link
Author

commented Jan 29, 2018

@posva would you happen to know if this is possible with vue-loader?

<!-- in some FunctionalComponent.vue, where should I use data ? -->
<template functional>
  <div>This should be .red</div>
</template>
@posva

This comment has been minimized.

Copy link
Member

commented Jan 29, 2018

I haven't written the code that handles functional components in vue-loader, I think it was @blake-newman
So no, sorry, I don't know :(

@btoo

This comment has been minimized.

Copy link

commented Feb 9, 2018

is there any easy way to "intelligently merge" classes in the same way the docs mention normal components do?

@gibkigonzo

This comment has been minimized.

Copy link

commented Sep 24, 2018

You can do it this way

<template functional>
  <div :class="data.class">This should be .red</div>
</template>
@VitorLuizC

This comment has been minimized.

Copy link
Contributor

commented Oct 21, 2018

I notice there's two data properties for classes staticClass and class and they're not inside data.attrs. So, you can use:

<template functional>
  <div
    :class="[
      data.class,
      data.staticClass
    ]"
  />
</template>
@patriciussanctus

This comment has been minimized.

Copy link

commented Jan 16, 2019

@VitorLuizC in terms of api - it's bad...

@VitorLuizC

This comment has been minimized.

Copy link
Contributor

commented Feb 19, 2019

@patriciussanctus Yeap, and same happens to style property.

You can see all data properties on VNodeData type defintion (or just console data).

vue/types/vnode.d.ts

Lines 44 to 47 in 4c98f9d

staticClass?: string;
class?: any;
staticStyle?: { [key: string]: any };
style?: object[] | object;

@rleite

This comment has been minimized.

Copy link

commented Jul 10, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
7 participants
You can’t perform that action at this time.