Vue-i18n: $t is undefined in data attributes

[hanspagel]

vue & vue-i18n version

[email protected]
[email protected]

Reproduction Link

http://codepen.io/hanspagel/pen/ryLwyo

Steps to reproduce

Use this.$t in data

What is Expected?

Should return a translated string

What is actually happening?

this.$t is undefined

[kazupon]

Thank you for your reporting!

In data option, You need to use this.$i18n.t(VueI18n instance method).
In the Vue lifecycle, data initialization with data option invoke before computed props initialization.
In vue-i18n v6 later, $t, $tc and $te are implemented with computed prop of Vue.

I'll try to write about it as caveats into v6 documentation. :)

[acrolink]

@kazupon I have tried your suggestion above but I am getting Cannot read property '$i18n' of undefined. I tried like this:

  data: () => ({
    title: this.$i18n.t('generate_random_choices'),
    choices: null,
    result: null
  }),

[malbonm07]

thnk u man!

[kjswalls]

@acrolink The reason you're getting that error is because you're using an arrow function to return the data object so this isn't bound correctly when you reference it. This happened to me too! To fix:

data: function () {
    return {
        title: this.$i18n.t('generate_random_choices'),
        choices: null,
        result: null
    };
},

[praburangki]

@acrolink if you have a static translations this is how I would do it:

data: vm => ({
  something: vm.$t('generate_random_choices'),
})

[Maxtoros]

These two solutions work just fine (y)

@acrolink The reason you're getting that error is because you're using an arrow function to return the data object so this isn't bound correctly when you reference it. This happened to me too! To fix:

data: function () {
    return {
        title: this.$i18n.t('generate_random_choices'),
        choices: null,
        result: null
    };
},

@acrolink if you have a static translations this is how I would do it:

data: vm => ({
  something: vm.$t('generate_random_choices'),
})

Otherwise, separating the i18n in a plugin is essential to be able to use it ( 'easily' ) in these cases :

• Vuex store
• Route guards
• beforeRouteEnter Vue hooks — the Vue instance is not not ready yet, so you can’t use this ( which is our case , either you want to use the internationalization in data and don't want to pass through computed.

[tr00ks]

I had same $t is undefined error as OP, but I was trying to access $t in the props attribute for setting default value in the prop validation. I'm not sure how it would differ from data attribute, still learning the nuances of it all. But the link below was the solution that helped me, leaving it here if it helps anyone else.

https://stackoverflow.com/questions/57171720/access-this-vm-instance-from-props-default-vuejs

[amaury-hanser]

Hello,

Not sure if I should open a new issue or ask a question here, because my question is quite similar.

I've understand that I need to call _i18n_ like this in the data object:

this.$i18n.t('generate_random_choices')

But what if I want to call it in a static object living outside data ?

data() {
    return {
    };
}, 
foo: [
    {
        title: this.$i18n.t('fooTranslation')
    },
],

I'm getting this error:
Cannot read property '$i18n' of undefined