如何在 json 部分的 Vue 文件中使用 I18n

Question

我使用 vue.js、nuxt.js，我安装了 i18n 包，配置了它，如果 Vue 文件中的文本，翻译工作正常。

Vue 文件有一个从 json 加载的菜单，该菜单位于同一页面上。

这是我的菜单，使用json方法加载：

   {
     id: 1,
     title: "Home",
     submenus: [
       {
         id: 1,
         title: "Home 1",
         url: "/",
       },
       {
         id: 2,
         title: "Home 2",
         url: "/home-2",
       },
       {
         id: 3,
         title: "Home 3",
         url: "/home-3",
       },
     ],
   }, 

编辑： 在 Vue 页面中我添加 i18n:

<script setup lang="ts">
const { locales, locale, setLocale } = useI18n();
const language = computed({
    get: () => locale.value,
    set: (value) => {
        setLocale(value);
    },
});

菜单是：

const menus = [
  {
    id: 1,
    title: "Home",
    submenus: [
      {
        id: 1,
        title: "Home 1",
        url: "/",
      },
      {
        id: 2,
        title: "Home 2",
        url: "/home-2",
      },
      {
        id: 3,
        title: "Home 3",
        url: "/home-3",
      },
    ],
  },
]

我如何需要从

title

翻译

id1

和从

title

翻译

submenus

，我怎样才能正确翻译？

我尝试制作

title: "{t('main_menu'}",

，但它不起作用，它只显示此文本。

Answer 1

您可以使用来自

t

的 Composer 实例

useI18n()

来翻译：

const { t, locales, locale, setLocale } = useI18n();

title: t('main_menu')

在文档中看到here。