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

时间:2018-09-15 12:40:54

标签: vue.js vue-i18n

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

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

3 个答案:

答案 0 :(得分:2)

好的,看来import sys import stdio # Ask the user input for the list of integers numList = list(sys.argv[1]) maxcount = 0 value = None location = None i = 1 while i < len(numList) - 1: resList = [] count = 0 # If i > i-1, then we start taking i into the resList if numList[i] > numList[i - 1]: # start counting resList += [numList[i]] # Iterating through the rest of the numbers j = i + 1 while j < len(numList): # If the j element equals the i, then append it to resList if numList[i] == numList[j]: resList += [numList[j]] j += 1 elif numList[i] < numList[j]: # if j element is greater than i, break out the loop i = j break else: # if j element is smaller than i, count equals length of resList count = len(resList) if count > maxcount: maxcount = count value = resList[1] location = i i = j #EXTRA CHECK HERE if j == len(numList): maxcount = len(resList) value = resList[1] location = i break else: # if not greater than the previous one, increment by 1 i += 1 stdio.writeln("The longest continuous plateau is at location: " + str(location)) stdio.writeln("Length is: " + str(maxcount)) stdio.writeln("Number is: " + str(value)) 总是返回一个字符串。

所以我发现的解决方案是将消息导入我的组件中,然后从那里直接使用它:

$t()

答案 1 :(得分:1)

非常简单,从$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就足够了,因为我们不想访问翻译,只希望访问元素的数量。

答案 2 :(得分:0)

您使用的是对象而不是数组,但是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>