Join the Stack Overflow Community
Stack Overflow is a community of 6.5 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

I struggle in creating nested components where each layer includes templates:

<wizard>
    <step name="first">Do this step first!</step>
    <step name="second">This should follow</step>
</wizard>

(full example: http://jsfiddle.net/maxhq/9o4qxd7t/)

I only get templates to work either for parent or for child components, never for both.

  • if parent has no template and is used with <... inline-template>, child components (and their templates) are evaluated (like in http://jsfiddle.net/hajkrupo/3/)
  • if parent includes a template (even with special tag <content>), then the child components do not get inserted/evaluated

Can this be solved in vue.js?

share|improve this question
    
I believe that this is your problem http://vuejs.org/guide/components.html#Content_Insertion: "transcluded contents are compiled in the parent component’s scope, not in the child’s scope". – mauricius Aug 28 '15 at 11:19

No. inline-template means you define template inline there there:

When this param is present, the component will use its inner content as its template rather than transclusion content. This allows more flexible template-authoring.

You can do it this way: http://jsfiddle.net/8k335nrf/

share|improve this answer
    
It can't be solved? That makes me weep a bit :-( I know I can write it the way you showed, but then the markup that I like to see as internal to the component has to be exposed to the "outside" world. – MaxHQ Aug 27 '15 at 19:49

If you're using the latest vue.js version (1.0.26 at the time of writing) your problem is using <content></content> as the syntax was changed to <slot></slot>

JSFiddle

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.