Element Plus 使用el-dialog嵌套 el-tabs出现多语言报错问题 $t

最新推荐文章于 2024-08-15 09:05:41 发布

高申航

最新推荐文章于 2024-08-15 09:05:41 发布

阅读量462

点赞数 1

分类专栏：笔记文章标签： vue.js javascript 前端 elementui

本文链接：https://blog.youkuaiyun.com/qq_46058838/article/details/135951199

版权

笔记专栏收录该内容

9 篇文章

订阅专栏

文章讲述了在使用Vue-i18n时，设置`legacy:false`会导致多语言下拉菜单失效的问题，解决方案是将`<template>`中的`messages`替换为`list`，并在setup钩子中处理国际化对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

错误信息 TypeError: _ctx.$t is not a functionat

解决方法：
在多语言 locale文件夹下的 index.js文件

添加 legacy: false,

const i18n = createI18n({
  __VUE_I18N_LEGACY_API__: false,
  __VUE_I18N_FULL_INSTALL__: false,
  locale: locale,
  fallbackLocale: "zh-cn",
  globalInjection: true,
  legacy: false,
  messages,
});

但是当 legacy: false,时会出现多语言下拉框出不来

错误代码

 <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item
          v-for="(locale, key) in $i18n.messages"
          :key="`locale-${locale.message.language}`"
          :command="key"
          :disabled="name === key"
        >
          {{ locale.message.language }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>

修改后代码

<template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item
          v-for="(locale, key) in list"
          :key="`locale-${locale.message.language}`"
          :command="key"
          :disabled="name === key"
        >
          {{ locale.message.language }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>


  setup() {
    const { locale, t ,messages} = useI18n()
    const list = messages.value
   return {
      list
    }
  }

具体情况具体分析...