Q: Dynamically rendering a label that is a function inside an object?

[Anthony Clausing]

Hi, I'm trying to do something like this:

breadcrumb: {
  label: routeParams => `route params name: ${routeParams.name}` },
  parent: 'Menus'
}

But when I look at the getBreadcumb function I noticed to my understanding it is not possible:

getBreadcrumb(bc: string | CallbackFunction | Breadcrumbs): string {  
   let name = bc;
   if(typeof name === "object") {
     name = name.label
   }
   if (typeof name === "function") {
     return name.call(this, this.$route.params);
   }
  return name;
}

Is it possible for you to cover this feature in the future? I think replacing:

   if(typeof name === "object") {
     name = name.label
   }

with:

  if(typeof name === "object") {
     if(typeof name.label === 'function) {
       return name.label.call(this, this.$route.params);
     } else {
       name = name.label
     }
  }

Would work and wouldn't be a breaking change

[Ivan Demidov]

@AnthonyClausing Thank you, but this is an oversight on my part. I originally planned to do the same as you suggest because I described it in the type.

vue-2-breadcrumbs/src/index.ts

Lines 8 to 11 in 81997c5

 type Breadcrumbs = { 
   label: string | CallbackFunction 
   parent: string 
 } 

And I decided to do a little better. Now you can return dynamically an object

breadcrumb() {
  const { name } = this.$route;

  return {
    label: name,
    parent: 'settings'
  };
}