问题描述
我在nuxtjs上有一个站点,在那里我使用nuxt-i18n并具有两种语言设置,英语为默认lang。
如果我设置第二种语言并刷新页面(f5),当我尝试将语言切换回默认值时会出现问题。但是使用第二语言看起来不错。
控制台中有很多错误,例如
[vue-i18n] Value of key 'auth.logout' is not a string! vue-i18n.esm.js:33
[vue-i18n] Cannot translate the value of keypath 'auth.logout'. Use the value of keypath as default. vue-i18n.esm.js:33
[vue-i18n] Value of key 'appbar.sorting.label' is not a string! vue-i18n.esm.js:33
[vue-i18n] Cannot translate the value of keypath 'appbar.sorting.label'. Use the value of keypath as default. vue-i18n.esm.js:33
[vue-i18n] Value of key 'appbar.sorting.create_asc' is not a string! vue-i18n.esm.js:33
[vue-i18n] Cannot translate the value of keypath 'appbar.sorting.create_asc'. Use the value of keypath as default. vue-i18n.esm.js:33
[vue-i18n] Value of key 'appbar.sorting.create_desc' is not a string! vue-i18n.esm.js:33
另外,如果我使用默认语言加载页面,然后切换到第二个语言,则一切正常。
对于切换语言,我使用一个组件。
<template>
<v-row>
<v-col cols="auto" id="language">
<v-select
v-model="current_language"
dense
:items="languages"
item-value="code"
item-text="name"
max-width="10"
>
<template v-slot:selection="{ item }">
<v-img :src="item.flag" max-height="32" max-width="32"></v-img>
<span class="ml-3">{{ item.name }}</span>
</template>
<template v-slot:item="{ item }">
<v-img :src="item.flag" max-height="32" max-width="32"></v-img>
<span class="ml-3">{{ item.name }}</span>
</template>
</v-select>
</v-col>
</v-row>
</template>
<script>
export default {
props: ["instant"],data() {
return {
current_language: this.$i18n.locale,languages: [
{
name: "English",code: "en",flag: "/img/usa-flag.png"
},{
name: "Russian",code: "ru",flag: "/img/russia-flag.png"
}
]
};
},watch: {
current_language(val) {
if (typeof this.instant != "undefined") {
this.$router.push({ path: this.switchLocalePath(val) });
}
}
},methods: {
save() {
this.$router.push({ path: this.switchLocalePath(this.current_language) });
}
}
};
</script>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)