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

Question

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

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

问题是我想在我的组件中根据幻灯片的数量呈现我的 slider 。

所以这是这样的:

<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 实例的情况下访问 i18n？

Answer 1

很简单，访问消息property来自 $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 对象时，你就放弃了这个安全网。某些语言环境可能缺少 key 。

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