How do I use a computed property in a child Vue component using vue-router

1
votes

Consider a computed property of:

  computed: {
menuItems (){
  let menuItems = [
    {icon:'dashboard', title:'Home', link:'/'},
    {icon:'fa-code', title:'Code Portfolio', link:'/code'},
    {icon:'fa-rss', title:'Blog', link:'/'},
    {icon:'fa-info-circle', title:'About', link:'/'},
    {icon:'fa-envelope', title:'Contact', link:'/'},
  ]
  return menuItems
}}

Using vue-router, how do I pass this array to the child component?

I've tried declaring the prop in the component and binding it to router-link:

Component:

props: ['menuItems']

Parent:

<router-view :menuItems="menuItems"></router-view>

This isn't working. How do I correctly pass the prop, or is there a better way to do it entirely. Thanks!

2
vue.jsvuejs2vue-router
Possibly :menu-items="menuItems" depending on how your template is defined. If it is in DOM, it needs to be kebab-cased. Otherwise it's something else. - Bert
To clarify, I am using a computed property instead of just a data property because it will later interact with an authorization state. - Doug E
@Bert, good suggestion. I missed that. Still not working though. - Doug E
Interesting. Up until 2.7, that would have worked. As of 2.8 it's not. - Bert
They broke it yesterday heh. I guess this assumes you are using 2.8 or 3.0. If you are, try reverting to 2.7. github.com/vuejs/vue-router/issues/1800 - Bert

2 Answers

0
votes

You don't need to use a computed method with static data (or with data that, once the component is created, will never change. You could simply use the data property of the component.

Then: what are you tryng to do? Maybe you need a menu component? You can declare your App (or main component)'s template in this way:

<template>
  <div id="app">
    <custom-menu></custom-menu>
    <router-view></router-view>
  </div>
</template>

In your custom-menu component you can handle your menu links, if they change based on the route

0
votes

I'm still not sure how to pass an dynamic object through as a prop but I think I was overthinking the whole thing.

From the vue.js documentation: "It is often overlooked that the source of truth in Vue applications is the raw data object"

Since I was only trying to get an authorization state passed down globally to my components it was simplest to just reference the root data instance.

So in any component that I need that data I just create a computed property:

computed: {
    user(){
      return this.$root.$data.user
    }
  }

In cases where the root data is dynamic or their are lots of global data vuex works great. I just didn't want to use it for this small project.