Skip to content

Allow passing props:true instead of passing an object for named views #2565

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

Closed
kmc059000 opened this issue Jan 2, 2019 · 4 comments
Closed

Comments

@kmc059000
Copy link

kmc059000 commented Jan 2, 2019

Version

3.0.2

Reproduction link

https://jsfiddle.net/efq2Lzom/

Steps to reproduce

I'm having unexpected behavior with nested named views where the named components are not all rendered. Also props are not being passed when using named views.

In the jsfiddle, links 3 and 4 do not behave as expected.

What is expected?

Props are passed when using named views. Components for named views should be displayed.

Link 3:

The top section should have content "Top - 5". The bottom section should display 5 on both rows.

Link 4

Both the top and bottom sections should display "5".

What is actually happening?

Props are not always passed to named components. Components for named views are not always displayed.

Link 3

The top section should render the Top component. The prop for the nested view's component should have prop passed.

Link 4

The prop from the route param should be passed to the named components.


I ran across this with a complex page layout. I have a toolbar at the top of my app (defined in the same component as the default ) and a number of routes that are nested 2-3 levels deep. I want to change the content of the toolbar based on the deepest level of route hierarchy.

I created a <router-view name="toolbar">, but I'm struggling to get content rendering and changing according to the deepest route.

@posva
Copy link
Member

posva commented Jan 2, 2019

You have to provide an object to props to tell which components must receive props: #2499
I think it would be nice being able to also just pass true directly instead of creating an object

@posva posva changed the title Nested named routes do not render all components or pass props Allow passing props:true instead of passing an object for named views Jan 2, 2019
@posva
Copy link
Member

posva commented Jan 2, 2019

nvm, it's already at #1779

@posva posva closed this as completed Jan 2, 2019
@kmc059000
Copy link
Author

kmc059000 commented Jan 3, 2019

Thank you! I confirmed that changing props to use an object allows the props to be passed correctly. I also found documentation for this under the props section.

I think it would also be helpful to add that documentation to the named view section. Would you accept a PR for this?

However, I still have a problem where I cannot get all named views rendered when using nested views. I distilled it into https://jsfiddle.net/0oLr4v1f/

Should I create a new PR for this?

Link 1 which uses a nested view does not display the named router-view top. However link 2 does show the desired component in the top router-view.

@posva
Copy link
Member

posva commented Jan 4, 2019

it's because one is using children and the other is not, so the one using children named views should named the nested router-view (https://router.vuejs.org/guide/essentials/named-views.html#nested-named-views)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants