Доступ к сообщениям 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 возвращает мне длину первого слайда (7 в случае с Kitten1).

Есть ли способ получить доступ к i18n без воссоздания его экземпляра?

Answer 1

Хорошо, похоже, $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 2

Это очень просто, доступ к сообщениям свойство из $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, потому что мы не хотим получать доступ к переводам, только количество элементов.

Answer 3

Вы используете объекты вместо массивов, но объекты 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>