Get translations inside the components method

I am trying to use translations object inside the methods. I lost more than 1 hour with this and finally came with this solution, but it is really intuitive to me. Is there any shorter way, because I can’t find it in documentation.

export default {
    data () {
        return {
            trans: this.$store.state.i18n.translations[this.$store.state.i18n.locale],
            ...
        }
    },
    methods: {
        ...
        setTitle (index, item) {
            console.log('--- TITLE ---');
            console.log(this.trans['services.' + index + '.items.' + item + '.title']);
            return this.trans['services.' + index + '.items.' + item + '.title'];
        }
        ...
    }
}

[daveo1001]

I don’t really get the wizardy portion of vue but turning the metaInfo from an object into a function got things cooking. Oh, and I had to move this.$t() into a lifestyle function instead of being inside data, which makes sense but I wasn’t thinking. Here’s the final working code.

export default {
  data: () => ({
    title: '' // can't put this.$t() here
  }),
  metaInfo () {
    return {
      title: this.title
    }
  },
  created () {
    this.title = this.$t('login')
  }
}

Thanks again for hanging out with me as I got through this!

[tikiatua]

Hi @kikky7,

You should be able to simply use this.$t('key') to access the translations in methods. However please be aware, that the method result will not update if the locale or translation is changed. For this to work, you must use computed properties.