vue3 i18n动态获取key的实现方式

更新时间：2025年09月17日 08:54:43 作者：ana_9717

在Vue3项目中,使用i18n动态获取keyzh文件时,直接用中括号无效,需改用数组形式如$[key, 'zh'],明确指定语言代码以正确加载翻译

vue3 i18n动态获取key

项目中使用vue3 加 i18n，需要动态获取key

zh文件

{
    zh: {
        a: '啊aaa'，
        b: 'bbb'，
        c: 'cccc'，
        d: 'dddd'，
    }
}

正常用中括号获取发现没生效

const test = [
    'a' , 'b', 'c', 'd'
]

<var-option
  v-for="item in test "
 :key="item"
:label="$t('zh[item]')"
 :value="item"
/>

调查了半天发现需要这么写就好了

<var-option
  v-for="item in test "
 :key="item"
:label="$t('zh.'+ item)"
 :value="item"
/>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue 路由缓存路由嵌套路由守卫监听物理返回操作
这篇文章主要介绍了vue 路由缓存路由嵌套路由守卫监听物理返回操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
uniapp中easycom用法实例详解
easycom是Uniapp框架中非常方便的组件自动注册机制，可以大大简化组件的使用和管理，这篇文章主要介绍了uniapp中easycom用法详解,需要的朋友可以参考下
2023-03-03
vue封装全局过滤器的方法详解
这篇文章主要为大家详细介绍了vue封装全局过滤器的方法,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下
2024-12-12
vue+node实现图片上传及预览的示例方法
这篇文章主要介绍了vue+node实现图片上传及预览的示例方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
详解从vue的组件传值着手观察者模式
本文详细介绍了从vue的组件传值着手观察者模式，感兴趣的同学，可以参考下，理解其原理。
2021-06-06
解决Vue2跨域报错AxiosError net::ERR_FAILED、 Network Error、ERR_N
这篇文章主要给大家介绍了关于解决Vue2跨域报错AxiosError net::ERR_FAILED、 Network Error、ERR_NETWORK的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
2022-11-11
基于Vue实现鼠标滚动轮控制页面横向滑动效果
这篇文章主要介绍了如何基于Vue实现鼠标滚动轮控制页面横向滑动效果,文中通过代码示例和图文结合的方式给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2024-09-09
详解Vue.use自定义自己的全局组件
本篇文章主要介绍了Vue.use自定义自己的全局组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
el-date-picker日期时间选择器的选择时间限制到分钟级别
文章介绍了如何使用el-date-picker 组件来限制用户选择的时间,禁止选择当前时间的日期及时分,同时允许选择其他日期的全天时分,通过设置 `pickerOptions` 对象的属性,可以实现对日期和时间的精确控制,感兴趣的朋友跟随小编一起看看吧
2025-01-01
Vue实现父子组件的事件传递的示例代码
在Vue.js这个现代化的前端框架中,组件化是其核心理念之一,正确的组件间通信是实现高效和可维护代码的关键,在许多应用程序中,父子组件之间的事件传递是一个常见的需求,,本文将深入探讨在Vue中如何实现父子组件的事件传递,并辅以示例代码来展示这些概念
2025-01-01