如何解决如何在 Ionic VueJS 中使用 Vue-i18n 自定义来自 Yup/Vee-validate 的表单错误消息
我想使用 vue-i18n 来翻译我的表单错误信息。
我编写了一个“lang.ts”文件来构建我的 i18n 实例,如下所示:
import { createI18n } from 'vue-i18n';
import french from './i18n/fr-FR.json';
import english from './i18n/en-US.json';
// push translations to list
const messages = {
'en-US': french,'fr-FR': english
}
// Create VueI18n instance with options
export const i18n = createI18n({
locale:"en-US",messages
});
我在“main.ts”中初始化所有这些
...
const app = createApp(App).use(router);
router.isReady().then(() => {
Device.getLanguageCode().then(function (lang) {
i18n.global.locale = lang.value; // changing locale using Capacitor locale getter
app.use(i18n)
.use(IonicVue)
app.mount('#app');
});
});
我正在使用 yup 自定义架构来验证我的表单,这就是我提到我的自定义错误消息的地方,问题是我的架构中没有使用我的“全局”区域设置值,它总是转换为默认值语言(此处为 en-US...)
这是我的架构
export const LoginFormContentSchema = yup
.object({
login: yup.object({
email: yup.string().email(i18n.global.t('wrongMail')).required(i18n.global.t('emptyMail')),// translating my error messages to current global locale
password: yup.string().required(i18n.global.t('emptyPassword')),url: yup
.string()
.required(i18n.global.t("urlEmpty")).lowercase()
.matches(/^(https:\/\/)?[a-z0-9._-]+(\.fr)/),}),})
.required();
因为我在安装应用程序之前更改了语言环境,所以我应该在任何地方都将 fr-FR 作为语言环境,但是当错误消息弹出时,即使我的设备是法语和我的 global.locale 是 fr-FR。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。