在 vuejs 中通过 i18n 翻译整个组件

Question

我想用 i18n 翻译我的整个组件，但我不知道如何在这个用例中使用 $t()。我有这样的数据

[
{"prizeCount":"300","prizeSum":"2442000","gameStartAt":"2018-01-08 13:00:00.000000"},       
  {"prizeCount":"288","prizeSum":"2530000","gameStartAt":"2018-01-09 12:00:00.000000"}
]

我将此数据传递给 :items="mydata" 以获得 table，我想翻译我的字段的标题，例如我想将 prizeCount 翻译成另一种语言。我正在使用 vue-bootstrap。最好的解决方案是什么？

main.js:

import Vue from 'vue'
import App from './App'
import router from './router'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import i18n from './i18n'

Vue.config.productionTip = false
Vue.use(BootstrapVue)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,

  components: {
    App
  },

  i18n,
  template: '<App/>'
})

Answer 1

您可以这样添加：

new Vue({
  el: '#app',
  router,

  components: {
    App
  },

  i18n,
  t: i18n.t,
  template: '<App/>'
})

在您的组件中，您可以在方法中使用 $t 或 this.$t。

要从您的对象中获取密钥，您可以这样做：

data: [
 {"prizeCount":"300","prizeSum":"2442000","gameStartAt":"2018-01-08 13:00:00"},       
 {"prizeCount":"288","prizeSum":"2530000","gameStartAt":"2018-01-09 12:00:00"}
]

data.forEach( obj => {
  let keys = Object.keys(obj)
  // ['prizeCount', 'prizeSum', 'gameStartAt']
  newData = []
  newObj = {}
  keys.forEach( key => {
    let val = obj[key]
    let trans = this.$t(key)
    newObj[trans] = val
  })

  newData.push(newObj)
})

在 vuejs 中通过 i18n 翻译整个组件

Translate whole component via i18n in vuejs

vue.js

vue-i18n

bootstrap-vue