i18n写在data中无法切换语言的解决办法

最新推荐文章于 2023-12-12 13:47:33 发布
最新推荐文章于 2023-12-12 13:47:33 发布
阅读量1k 收藏 2
点赞数
文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Reinharclt/article/details/122063723
版权

       第一次写，加上技术极其有限，请各位大佬看了不要见笑哈

       我是今年毕业科班出身的程序员，但我没有过实习经验，因为我跨专业考研失败了，本身专业知识也不是很牢，所以我的产出可能没有什么技术性，但都是我亲身经历。我去了杭州由于没有实习经验&项目经验，只面了2家，都没过，于是乎回到老家湖州随便找了个xx技术服务公司，先积攒一点项目经验

        这里的老板给我分配了一个“翻译”的工作，因为公司承包了一个国外的项目，页面需要中英文切换，项目实现语言切换的是i18n，i18n是international的缩写

        只要在js文件中写中英文的文本，再在vue模板中导入就可以了，vue-i18n文档中的使用方法如下图

         我发现如果将$t('xxx.xxx')写在data中不能实现语言的切换，页面渲染时是何种语言就是何种语言展示页面。我试过用vue生命周期来实现点击按钮切换语言，都以失败而告终。网上关于这个的教程也不是很多，我一时也找不到解决的办法。直到后来我想到了vue的计算属性，于是本来是在data中定义数组改成了在computed中定义数组，如下图

         这样定义的columnsAll数组就可以实现切换语言了。

        虽然在各位大佬眼中只是个小问题，但对我来说也是一次成长，虽然可能以后也不会用到hh

        给我动力的是一个b站up主 阿崔cxr 在学习群里跟着大佬学到了很多东西  一起学习打卡

        附上崔大的b站链接~ 阿崔cxr的个人空间_哔哩哔哩_Bilibili

        冲冲冲！

Reinharclt
关注
vue-i18n国际化在data中切换不起作用
jieweiwujie的博客
09-17 1145
1 npm install vue-i18n 2引入插件包 // 引入插件和语言包 import VueI18n from 'vue-i18n' import zh from '@/i18n/langs/zh' import en from '@/i18n/langs/en' Vue.use(VueI18n) 3实例化 //实例化vue-i18n const i18n = new VueI18n({ // 从本地存储中取，如果没有默认为中文， // 这样可以解决切换语言后，没记住选择的语
使用vue 国际化i18n 实现多实现语言切换功能
10-17
在现代化的网络应用开发中，国际化（Internationalization，简称i18n）和本地化（Localization）是保证软件或网站能够适应不同语言和文化环境的重要技术。特别是对于前端框架Vue.js，它已经具有支持国际化插件的能力...
vuedata中使用i18n多语言配置-切换语言不生效-解决computed
JackieDYH的博客
07-09 3138
写在 data 初始化的时候拿到这些被国际化的值，并不能响应变化。 官方的解决办法是，建议我们将表达式写到computed属性里，不要写到data中使用 <div>{{$t('k.state')}}</div> // 可以动态改变 data() { return { dyh: this.$t('k.state') //只能拿到初始化时的多语言，不能动态改变 } } computed: { // 导航多语言 可以动态改变 ----官方推荐.
解决vue项目中i18n data里切换翻译不生效
全易
08-12 3327
nuxtjs配置i18n多语言、切换语言data中数据不起作用解决方案
HeXinT的博客
04-10 3946
将this.$t() 写到了data属性里，切换语言不起作用data是一次性生产的，你这么写只能是在 data 初始化的时候拿到这些被国际化的值，并不能响应变化。官方的解决办法是，建议我们将表达式写到computed属性里，不要写到data里。关于刷新页面 语言会重置为初始语言的问题 我不太清楚具体情况，但是原因可能是因为配置中的detectBrowserLanguage导致， 默认为true 跟随浏览器语言展示，改为false即可。
vue3国际化i18n切换部分未生效
最新发布
weixin_33913005的博客
12-12 1172
每次切换中英文，路由菜单都会重新更新，有多少条数据就会告警多少次，个人仔细检查代码感觉没有什么依赖问题，唯一就是路由数据变化，会重新更新视图。菜单采用的动态路由，由于面包屑和菜单标签导航是放存在pinna，在切换时面包屑和菜单标签导航未生效；本次采用方式是，中英文切换调用路由接口(后端回根据前端配置的语言返回对应的数据)；数据不是响应式的，也参考网上说的使用模版字符串方式，还是不行；问题1: 切换语言时，模版标签内的的配置是生效的，配置为字典，常量，表单el-from的rules未生效；
vue与vue-i18n结合实现后台数据的多语言切换方法
08-27
在本文中，我们将使用vue-i18n来实现后台数据的多语言切换。首先，我们需要在XXX.js文件中定义一个函数getUser，它将用于获取后台数据： ``` getUser(context,info){ context.$http.get(SERVER_URL+'/users',info)...
vue-i18n实现中英文切换的方法
10-15
为了实现手动切换语言，你可以添加一个切换按钮，并在按钮的`@change`事件中调用一个方法来改变语言环境。这里，我们可以使用`switch`组件，并通过`true`和`false`来标识中文和英文状态： ```html ``` 在对应的...
Vue i18n 中英文切换
素味平生的博客
07-03 1577
最近做的vue项目要实现国际化语言，自己琢磨看文档写出了一个简单的不能再简单的demo，供大家参考! 注：vue-cli项目 1.npm安装 npm install vue-i18n --save 2.i18n使用，在项目入口文件main.js中引入 import VueI18n from 'vue-i18n'； 在 src 目录下创建一个 langu...
i18n前端国际化 vue 在Echart中不生效
gittt的博客
02-15 693
【代码】i18n前端国际化 vue 在Echart中不生效。
使用 vue-i18n 切换中英文
热门推荐
大熊的博客
01-12 1万+
vue-i18n 仓库地址：https://github.com/kazupon/vue-i18n 兼容性： 支持 Vue.js 2.x 以上版本   安装方法：（此处只演示 npm） npm install vue-i18n   使用方法： 1、在 main.js 中引入 vue-i18n （前提是要先引入 vue） import Vue
vue+i18n 切换语言后无法刷新数据 的 解决方案
前端工程师--则丸
06-22 1万+
使用国际化vue-i18n 时, 在页面更新国际语言后 想刷新页面数据， vue刷新不起作用， 改变思路，直接改变使用了国际化的那些数据，重新使用this.$t()方法读取即可...
vue 双语言切换中，data内翻译文字不正常切换的解决方案
weixin_30268071的博客
09-11 600
背景 有这么一个登录页面，相关功能如下： 支持双语言，点击切换语言 表单内部有一个自定义的select，里面option的label、value都是的名字由外部提供；其中预设的option的label使用this.$t(...)提供 问题 在点击切换语言的时候，页面上翻译的文件都能够正常转换、唯独预设option的label不能，如下图，在切换到英文的时候，页面中其余部分都能够转...
nuxt 设置i18n后多语言文件不会动态更新
weixin_45641191的博客
06-26 929
nuxt.config 是nuxt 配置级别的文件，不由 webpack 处理，因此只会执行一次并且不会监视其中的导入引用。但是配完之后当我改多语言文件时就出现问题了，无论我怎么改，终端都不会HMR，怎么回事？原因是因为多语言文件是用require导入的，所以webpack不会监听本文件。昨天遇到的一个问题，然后研究了一整天，今天才得到解决。nuxt 设置i18n多语言时多语言文件不会动态更新。咋看之下，一点毛病也没有，官方文档就是这么配的。具体配置教程大家可以参考官网。
使用vue-i18n实现中英文切换
weixin_41897680的博客
11-15 2041
前言 一下内容均是基于vue3.0进行的 vue3版本的vue-i8n用法还是有挺大区别的相对于之前的版本 安装 npm install vue-i18n@next -S 创建目录及文件 - plugins 根目录，放一些插件配置文件 -- i18n 存放中英文配置的目录 配置中英文对照表 注：键名要一 一对应 出口文件：index.ts 使用 在main.ts 里全局引入 在页面中使用 ...
Vue-使用i18n实现中英文切换功能，表单验证，组件数据等
weixin_40651329的博客
03-31 1523
中英文切换功能，笔者是通过i8n实现的。本文讲述了各个场景下的中英文如何替换，包括表单验证，提示信息，各中组件等。 -安装i18n // 通过淘宝镜像安装 cnpm install vue-i18n --save -引入i18n 在src目录下创建i18n文件夹，新增i18n.js import Vue from 'vue' import locale from 'element-ui/l...
vue3中vue-i18n中英文切换
08-24
在Vue3中，使用vue-i18n进行中英文切换的步骤如下： 1. 首先，在main.js文件中，引入Vue和VueI18n，并创建一个实例i18n。 ```javascript import Vue from 'vue' import App from './App.vue' import VueI18n from 'vue-i18n' Vue.use(VueI18n) const i18n = new VueI18n({ locale: 'zh', // 默认语言为中文 messages: { zh: { // 中文语言包 // ... }, en: { // 英文语言包 // ... } } }) ``` 2. 在Vue实例中挂载i18n实例。 ```javascript new Vue({ i18n, render: h => h(App) }).$mount('#app') ``` 3. 在组件中使用`$t`或`$tc`来进行语言切换。 ```html <template> <div> <p>{{ $t('message.hello') }}</p> <!-- 或者使用命名空间 --> <p>{{ $t('namespace.message.hello') }}</p> </div> </template> ``` 4. 在切换语言的时候，通过调用`$i18n.locale`来改变当前的语言。 ```javascript methods: { switchLanguage(lang) { this.$i18n.locale = lang; } } ``` 这样就可以在Vue3中使用vue-i18n进行中英文切换了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [使用vue-i18n进行简单的中英文切换](https://blog.csdn.net/s_9527_s/article/details/124041130)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [vue切换中英语言制作方法（Element+i18n的使用）](https://blog.csdn.net/weixin_44748171/article/details/127647875)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值