我正在遵循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'
。
答案 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>