js中如何使用vue-i18n国际化获取相应语言对应字符?

发布于 2022-09-06 11:04:09 字数 585 浏览 13 评论 0

通过 vue-i18n 实现了多语言切换,在template里面已经实现了该功能,但是现在需要在 js 中 获取对应语言的字符,网上找了好久还是没找到,有人知道怎么弄么?

template 里面

{{ $t('message.exchangeCenter.exchangeDate') }}

js里面需要:需要把中文替换成多语言,求解

const exchangeTypes = [
    {id: 1, text: '游戏币'},
    {id: 2, text: '积分'}
];

js中写法:

const exchangeTypes = [
    {id: 1, text: this.$t('xxx')},
    {id: 2, text: this.$t('yyy')}
];

错误提示:
图片描述

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(7

一片旧的回忆 2022-09-13 11:04:10

文档都是摆设么
http://kazupon.github.io/vue-...

// If using a module system (e.g. via vue-cli), import Vue and VueI18n and then call Vue.use(VueI18n).
// import Vue from 'vue'
// import VueI18n from 'vue-i18n'
//
// Vue.use(VueI18n)

// Ready translated locale messages
const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  ja: {
    message: {
      hello: 'こんにちは、世界'
    }
  }
}

// Create VueI18n instance with options
const i18n = new VueI18n({
  locale: 'ja', // set locale
  messages, // set locale messages
})

定义好你的字符以后,代码中用
const exchangeTypes = [

{id: 1, text: this.$t('coin')},
{id: 2, text: this.$t('points')}

];

巾帼英雄 2022-09-13 11:04:10

import Vue from 'vue'
import i18n from '@/i18n.js'
const validVue = Vue.extend({ i18n });
new validVue()就是this了
此时new validVue().$t('即可拿到')

悲凉≈ 2022-09-13 11:04:10

换个思路,包起来处理,直接在main.js的new Vue 赋给一个变量,然后再从变量中获取就可以了
如 main.js中
window.vm= new Vue({
// 单独js 中
window.vm.$i18n.t('langkey')

最美不过初阳 2022-09-13 11:04:10

谢谢,问题已经解决了,回来晚了,不好意思。主要问题是这个应该算扩展的 vue 对象,所以this指向的和我们写vue代码里面的this指向是一样的,所以多语言对象只能写到vue实例里面,而不能够直接在js中通过 $t 的方式来获取多语言字符。

双马尾 2022-09-13 11:04:10

题主你好,我也遇到了同样的问题,但是看了你的回答还不是很明白,题主最后怎么解决的呢?谢谢分享^-^

相权↑美人 2022-09-13 11:04:10

怎么实现占位传值呢 就是文本某个位置字符需要动态改变 比如:
message: {

  hello: '你好'{0}
}

就是可以实现 你好lucy \你好Rosi 这样的
清音悠歌 2022-09-13 11:04:10

根据 issue(How can i use vue-i18n in '.js' file, I have use it in Vue template and it works. · Issue #149 · kazupon/vue-i18n · GitHub)中的描述,可用的方法有

  1. 从路由中使用:router.app.$t
  2. 导出一个 Vue 实例用于国际化
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文