时间戳

首页 > 解决方案 > 访问 vue-i18n 消息作为对象

javascript - 访问 vue-i18n 消息作为对象

问题描述

我想创建一个取决于页面的动态滑块。

    security_signin: {
        slide1: 'Kitten1',
        slide2: 'Kitten2',
    },
    signup: {
        slide1: 'Kitten1',
        slide2: 'Kitten2',
        slide3: 'Kitten3'
    }

问题是我想根据幻灯片的数量在我的组件中渲染我的滑块。

所以这是这样的：

<slide v-for="(item, index) in $t('message.'+page).length">
    <p v-html="$t('message.'+page+'.slide'+index)"></p>
</slide>

但是，我无法以这种方式正确访问消息。因为 $t('message.'+page).length给了我第一张幻灯片的长度（在 Kitten1 案例中为 7）。

有没有办法在不重新创建实例的情况下访问 i18n？

标签： javascriptvue.jsvue-i18n

解决方案

这很简单，从$i18n. 例如：

<slide v-for="(item, index) in Object.keys($i18n.messages[$i18n.fallbackLocale].message[page]).length">
    <p v-html="$t('message.'+page+'.slide'+index)"></p>
</slide>

更详细地说，$i18n.messages保存您的所有翻译，例如

en: {
    security_signin: {
        slide1: 'Kitten1',
        slide2: 'Kitten2',
    },
    signup: {
        slide1: 'Kitten1',
        slide2: 'Kitten2',
        slide3: 'Kitten3'
    }
}

为您选择的语言环境设置子集，$i18n.fallbackLocale用于备用语言环境或$i18n.locale您当前的语言环境。您应该获取您的 javascript 对象。

要非常小心，当您翻译$t()任何缺失的翻译时，都会从备用语言环境中恢复。但是当你直接访问 javascript 对象时，你就放弃了这个安全网。某些语言环境可能缺少键。

在这种情况下fallbackLocale就足够了，因为我们不想访问翻译，只想访问元素的数量。

推荐阅读