Q: Dynamically rendering a label that is a function inside an object?
AnthonyClausing opened this issue · comments
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
@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
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'
};
}