Translate whole component via i18n in vuejs

Question

I want to translate my whole component with i18n and I don't know how to use $t() in this use case. I have data like this

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

I pass this data to :items="mydata" for table and I want to translate title of my fields for example I want to translate prizeCount to another language. I am using vue-bootstrap. What is the best solution for this?

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/>'
})

Can you provide `main.js` or `app.js` where you import `i18n`? @sinak — mare96, Jun 25 '19 at 10:20

mare96 · Accepted Answer · 2019-06-25T11:07:51.153

1

You can add it like this:

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

  components: {
    App
  },

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

Than in your component you can use $t or this.$t in your methods.

For get keys from your object you can do like this:

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)
})

edited Jun 25 '19 at 11:07

answered Jun 25 '19 at 10:33

mare96

3,749
1
16
28

cant use $(t) stuff in this use case. how can i use this??what is code like – sinak Jun 25 '19 at 10:48
You can use it like `$t('hello')`, hello is variable in your translate file. You are not clear what do you need? You need to translate your data keys before displaying it. – mare96 Jun 25 '19 at 10:51
In your case only you can do if you pass data like this is to get keys from object and translate keys before send it to table. – mare96 Jun 25 '19 at 10:55
Check edit. Maybe you can do something like this. I didn't test it but it's good idea. Good luck. – mare96 Jun 25 '19 at 11:08

Translate whole component via i18n in vuejs

1 Answers1