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

Question

我想创建一个依赖于页面的动态滑块。

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

Answer 1

您正在使用对象而不是数组，但是 JavaScript 对象没有 length 属性 - 您可以尝试使用数组：

// English locale
{
  "message":
  {
    security_signing:
    {
      slides:
      [
        'Kitten1',
        'Kitten2'
      ]
    },
    signup:
    {
      slides:
      [
        'Kitten1',
        'Kitten2',
        'Kitten3'
      ]
    }
  }
}

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

Answer 2

好的，看来 $t() 总是返回一个字符串。

所以我找到的解决方案是在我的组件中导入消息并直接从那里使用它:

import messages from '../messages'

export default {
   props: ['page', 'locale'],
   data(){
       return {
           slides: messages[this.locale].message[this.page]
       }
   }
}

<slide v-for="(slide, i) in slides">
    <p v-html="slide"></p>
    <img :src="'/assets/img/slider-bg-'+ i +'.png'" alt="">
</slide>

Answer 3

很简单，访问来自$i18n的消息property。例如：

<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 就足够了，因为我们不想访问翻译，只想访问元素的数量。

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

Access vue-i18n messages as object

javascript

vue.js

vue-i18n