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

[DOCS] Clearer usage of prop functions with named views #2493

Open
tesla3327 opened this Issue Nov 22, 2018 · 4 comments

Comments

Projects
None yet
3 participants
@tesla3327

tesla3327 commented Nov 22, 2018

What problem does this feature solve?

I spent a few hours this morning trying to get prop functions with named views to work.

At first I thought that props itself was supposed to be a function that returned an object for all named views:

const routes = [
  {
    path: '/organizations/:id/insights/:widget',
    components: {
      default: SeeMore,
      filter: Filter,
      actionBar: ActionBarBack,
    },
    props: route => ({
      actionBar: {  
        name: route.params.widget,
      },
      filter: {
        hideAutocomplete: true,
      }
    }),
  },
]

After reading and stepping through the vue-router code, I eventually figured out the correct implementation is:

const routes = [
  {
    path: '/organizations/:id/insights/:widget',
    components: {
      default: SeeMore,
      filter: Filter,
      actionBar: ActionBarBack,
    },
    props: {
      actionBar: route => ({  
        name: route.params.widget,
      }),
      filter: {
        hideAutocomplete: true,
      }
    },
  },
]

The docs are not very clear (at least to me) that this is the correct implementation. Not sure if others have had this problem, or if it's just me 🤷‍♂️

What does the proposed API look like?

My suggestion is to add a section to Passing Props to Route Components that explains how to use this with Named Views, along with an example.

Could also add a link to this section in the Named Views section of the docs.

@posva

This comment has been minimized.

Member

posva commented Nov 22, 2018

This is indeed missing in docs. It should go into https://router.vuejs.org/guide/essentials/passing-props.html if anyone wants to make a contribution
And, as you said, a little note to it in the Named Views section would also be nice.

@suprabhasupi

This comment has been minimized.

suprabhasupi commented Nov 26, 2018

@posva I would like to pick this up

@posva

This comment has been minimized.

Member

posva commented Nov 26, 2018

go ahead

@suprabhasupi

This comment has been minimized.

suprabhasupi commented Nov 26, 2018

go ahead

Thanks @posva!
I have created a PR for the this issue.
I have tried to be as simple and direct as possible(As this is my first contribution I might be missing some information to add), Please have a look and let me know if there is any changes required. 🙂

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