0

I have to use i18n variables for a select dropdown in the form. I can access i18n data in main.js like this :

 // Load locales
axios
    .get("http://localhost:3000/data")
    .then(({data}) => {
        console.log(data);
        appOptions.i18n.setLocaleMessage("fr", basil.get(data, "fr", {}));
        appOptions.i18n.setLocaleMessage("en", basil.get(data, "en", {}));
        appOptions.i18n.setLocaleMessage("nl", basil.get(data, "nl", {}));
    })
    .catch((error) => {
        console.error(error);
    });

In my form component I can use these date for example for simple field like this :

<div class="success" v-if="success">
                        {{ $t("contact.success_message") }}
</div>

I would like to use v-for for select options with "$t" variable . Something like this don't work :

<option
    v-for="item in $t("register")"
    :key="item"
    :value="item"
>

{{ item }}

Can you please tell me how can I achieve this if I have to follow the structure of the json file with i18n variable :

{
   es: {
       contact: {
                contact_demo: "Contáctenos para una demostración",
                contact_sales: "Comuníquese con ventas",
                ...


                },
      register: {
                option_Germany: "Alemania",
                option_Morocco: "Marruecos",
                option_Belgium: "Bélgica",
                option_Cook Islands: "Islas Cook",
                ...
Talha Tayyab
  • 8,111
  • 25
  • 27
  • 44
Dimitri Leduc
  • 1

1 Answers1

0

found the solution :

<select id="countries">
        <option
        v-for="value in $t('register',)"
        :key="value"
        >
        {{ value }}
        </option>
</select>
Dimitri Leduc
  • 1