Using i18n with array of objects

[VividLemon]

Hello, I have a situation where I am passing an array of objects down to a component. The array of objects contains multiple objects with strings, title and body. I have tried to use the syntax for local messages but it doesn't let me pass in an array. Any suggestions on how I can create language specific arrays?

[rchl]

I don't understand what you trying to do exactly and what is passed where.

You should provide some specific examples.

[VividLemon]

I have a parent passing down information to a child, the information is an array of objects.

The information would be like this

How I would prefer it to work, is i18n to pick between one array that's labeled en, and the other es.
To clarify even more, to pick between

[rchl]

The point of i18n is that you don't pass the translated strings but translation keys that get translated to the currently selected locale with the use of the $t function.

So you pass something like:

{
  title: 'page.title',
  body: 'page.body',
}

and then in your component you resolve the key to a translated message using $t.

What you are showing here on the screenshot seems completely backwards.

Maybe have a look at https://kazupon.github.io/vue-i18n/guide/formatting.html#named-formatting at least to try to understand the basic of how this module works (although I admit the documentation might not be great at explaining the very basics and assumes that the user understands that already).

[VividLemon]

I have already read much of the documentation and have many existing translations on the site. It's very similar to using android and developing multi language systems there. I also thank you for your replies and attempts at assisting me. Perhaps what could be better is considering end goals.

Consider the same sort of setup with the array of objects. How should you propose setting up multi language with information coming from a database? The idea behind using the current setup was to easily implement fetching this info from a database.

I've come up with two solutions that I see possible to have multi language support come from a database. The first is to develop multiple tables for each language, then when the page is loaded, get the language type, then query the database with a database specific language key for each piece of data I need. This way, all i18ns job would be is to pass the language type to the backend. (Haven't figured out how to make the language keys with the same name, not sure if it would work this way)

The second idea is a little more complex. The database would simply contain the translation keys. When someone saves data, the language keys and language data are stored into a file, and the keys stored in a a database. This approach is preferable, but how would I append the strings to the main language files. It should be noted that I'm using nuxt, not vanilla vue.

I'm curious on how i18n suggests saving multi language data to a database. Or how you would suggest. Thanks again