如何将I18N变量与V-FOR一起使用？

发布于 2025-02-09 21:11:49 字数 1332 浏览 0 评论 0原文

我必须使用i18n变量进行表单中的选择下拉列表。我可以在Main.js中访问I18N数据：

 // 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);
    });

在我的表单组件中，我可以使用这些日期，例如对于这样的简单字段：

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

我想将V-For用于选择“ $ t”变量的选择选项。这样的事情不起作用：

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

{{item}}，

如果我必须使用i18n变量遵循JSON文件的结构，请告诉我如何实现此目标：

{
   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",
                ...

原文

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"
>

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",
                ...

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

与之呼应 2025-02-16 21:11:49

找到解决方案：

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

found the solution :

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

回复收藏 0 原文

~没有更多了~