0

I am trying to access an object from vi18n

Vue: 3.2.0

Vite: 4.2.0

vue-18n: 9.2.2

i18n.js

import { createI18n } from 'vue-i18n'
import en from "./locales/en.js"

 // Create VueI18n instance with options
const i18n = createI18n({
    locale: 'en', // set locale
    legacy: false,
    messages: { en } // set locale messages
})

export default i18n

en.js

export const en = {
    parent: {
       child1: 'a',
       child2: 'b'
    }
}

In the component i am access this.$t('parent') to access all childs but it actually returning the parent as a string itself. And it shows a warning [intlify] Not found 'parent' key in 'en' locale messages

But if i am accessing like this this.$t('parent.child1') it is able to get the value of child1.

In older version vue 2 and vue-18n. it used to return the complete object.

Sam
  • 2,275
  • 9
  • 30
  • 53
  • What are you trying to do? This could be XY problem. I don't think that this.$t('parent') is documented usage – Estus Flask Jun 22 '23 at 08:15
  • So here i want to loop through parent and display the options as 'a' and 'b'. If i loop the parent object it is easy to display all the values inside it. Otherwise i have to manually pluck each child `$t('parent.child1)`, `$t('parent.child2')` ... `$t{'parent.child100'}`. Note it used to work in vuei18n version 8.x with vue 2. – Sam Jun 23 '23 at 07:09
  • Possible duplicate of https://stackoverflow.com/questions/52344776/access-vue-i18n-messages-as-object – Estus Flask Jun 23 '23 at 07:25
  • Not a good idea at all to rely on it for app logic. t() is for translation, if it worked differently, it was a quirk. If the keys fully duplicate messages object then get it and iterate it. In composition api it's useI18n().messages for current locale, I suppose. Or import en.js directly where you use it, since some locales could miss some keys, that's one of the problems with this approach – Estus Flask Jun 23 '23 at 07:29

0 Answers0