Hi,
I have set up a MenuBar in my Vue3 app with the following items, all having a label based on a i18n-translation:
const items = reactive([
{
label: t("components.home_page.menu_level01_item01"),
icon: "pi pi-fw pi-user-edit",
to: "/home/notes"
},
{
label: t("components.home_page.menu_level01_item02"),
icon: "pi pi-fw pi-book",
to: "/home/sources"
},
{
label: t("components.home_page.menu_level01_item03"),
icon: "pi pi-fw pi-cog",
to: "/home/settings"
}
]);
This works perfectly, the page is displayed, initialy, with the correct items in the menu. But when I switch to a different language everything in my apps is displayed in the new language except my menu items.
I already tried with making the labels as reactive items like so:
const label01 = t("components.home_page.menu_level01_item01");
And using computed does not resolve the issue as well.
Does anybody have any experience with this and some usefull tips?
Thanx!
How to make MenuBar items translatable
-
- Posts: 84
- Joined: 06 Sep 2022, 08:59
Hi, You can try using ref or you can set the data again with the watcher when the language changes.
-
- Information
-
Who is online
Users browsing this forum: No registered users and 11 guests