javascript 作为对象访问vue-i18 n消息

x6h2sr28  于 2023-05-21  发布在  Java
关注(0)|答案(4)|浏览(174)

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

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而不重新创建它的示例?

izkcnapc

izkcnapc1#

这非常简单,从$i18n访问messages属性。例如:

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

klh5stk1

klh5stk12#

$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>
pgvzfuti

pgvzfuti3#

你正在使用对象而不是数组,但是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>
u4vypkhs

u4vypkhs4#

Vue 3版本

import { createI18n } from "vue-i18n";
import pluralRules from "./rules/pluralization";
import numberFormats from "./rules/numbers.js";
import datetimeFormats from "./rules/datetime.js";
import en from "./locales/en.json";
import tr from "./locales/tr.json";

export default createI18n({
  locale: import.meta.env.VITE_DEFAULT_LOCALE,
  fallbackLocale: import.meta.env.VITE_FALLBACK_LOCALE,
  legacy: false,
  globalInjection: true,
  messages: { tr, en },
  runtimeOnly: false,
  pluralRules,
  numberFormats,
  datetimeFormats,
});

在定义之后,你可以从全局对象中获取你的消息。

let locale = this.i18n.global.locale.value
let messages = this.i18n.global.messages.value[locale]

相关问题