[英]Access vue-i18n messages as object
我想创建一个取决于页面的动态滑块。
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
访问 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
就足够了,因为我们不想访问翻译,只想访问元素的数量。
好的,看起来$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>
您使用的是对象而不是数组,但 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.