Vue I18n,如何获取dateTimeLocalization的语言环境?

时间:2019-08-09 10:02:06

标签: vue.js vue-i18n

我正在遵循this tutorial在我的vue代码中实施i18n。它的工作不便,但效果很好。我目前使用的是硬编码语言。这是我的本地化文件的样子:

export default: {
    'fr-fr': {
        ...
    },
    'fr-ca': {
        ...
    },
    'en-us': {
        ...
    }
}

我这样指定语言环境:

<td>{{ $d(new Date(date), 'short', 'fr-ca') }}</td>

可以正常工作,但是我不想硬编码它,而是希望能够获得用户使用的语言。类似于:

<td>{{ $d(new Date(date), 'short', 'app.i18n.locale') }}</td>

<td>{{ $d(new Date(date), 'short', 'this.$i18n.locale') }}</td>

但是所有这些或类似更改均无效。 后退开始了:

  

[vue-i18n]从'this。$ i18n.locale日期时间格式回退到'en'日期时间格式。

如何在不进行硬编码的情况下实现我想要的?

编辑:另一个示例是this one。我有相同的代码,但我希望自动处理这个问题,而不是'ja-JP'

2 个答案:

答案 0 :(得分:0)

您可以尝试从浏览器中获取首选语言列表,并假装其中第一种是用户最喜欢的语言:

var userLanguage = ((navigator.languages && navigator.languages[0]) || '').substr(0, 2);

答案 1 :(得分:0)

根据您的问题,我希望您将选定的语言环境保存到键“语言环境”下的对象“ i18n”中。

基本上,您的函数$d(new Date(date), 'short', 'app.i18n.locale')可以工作,但是在您的示例中,您有一个应具有语言环境的字符串。因此,将勾号'更改为反引号`。

new Vue({
  el: '#example',
  data: {
    i18n: {"locale": 'fi-FI'}
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="example">
  <p>{{ new Date().toLocaleDateString(`${i18n.locale}`, {weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'}) }}</p>
</div>