How to add props to dynamic component in vue.js?

Question

I create component dynamically:

<component is="tab"/>

How to add props for this component? I try:

<component is="tab" my-props="test" />

And I got error in console:

[Vue warn]: Attribute "type" is ignored on component <component> because the component is a fragment instance: http://vuejs.org/guide/components.html#Fragment-Instance

P.S. I'm using 1.0.26 version vue.js.

What does your tab component look like? The problem might not necessarily be related to the prop you are passing. — nils
– nils, Commented Aug 31, 2016 at 15:13
The problem might be with the attribute/variables found in your component. Post the codes! — highFlyingSmurfs
– highFlyingSmurfs, Commented Aug 31, 2016 at 16:08
It is not variable, it is simple text. Without 'my-props' attribute I dont have this warning. — slava_slava
– slava_slava, Commented Aug 31, 2016 at 20:22

GONG · Accepted Answer · 2016-09-01 06:51:12Z

4

If test not just "test" text, but some value in your data. Then you need to pass it like so:

<component is="tab" :props="test" />

And don't forget to add your properties in props array inside component. props: ['props'].

http://jsbin.com/zekiyeroka/edit?html,css,js,console,output

Here is working example. Adding to the data is optional, but i prefer this way. Because you can operate your data in the much easier way in the future.

P.S. you need to declare your data in the component like a function, not just object

edited Sep 1, 2016 at 6:51

answered Sep 1, 2016 at 3:38

GONG

4,0461 gold badge26 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

slava_slava Over a year ago

It is not working example, it is just jquery code which not relevant for this question.

GONG Over a year ago

@Slava fixed. Check it now

slava_slava Over a year ago

Yes, I see. Thank you!

Collectives™ on Stack Overflow

How to add props to dynamic component in vue.js?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related