使用Vue、Yup和i18n翻译的问题

vi4fp9gy 于 2023-03-24 发布在 Vue.js

关注(0)|答案(2)|浏览(342)

我有一个Vue.js应用程序（带有Vite），我使用Vee-validate和Yup进行表单验证，并使用i18 n进行消息翻译。然而，当用户设置$i18n.locale='xx'时，模式中的自定义错误不会真实的更新。
模式：

import { useI18n } from "vue-i18n"

const {t} = useI18n()

const schema = yup.object().shape({
  username: yup
    .string()
    .required(t("field_required"))
    .email(t("field_error_email")),
  password: yup.string().required(t("field_required"))
})

使用$t("message")直接打印到模板的消息可以正常工作。
版本：

"dependencies": {
    "vee-validate": "^4.5.11",
    "vue": "^3.2.33",
    "vue-i18n": "^9.1.9",
    "yup": "^0.32.11"
}

vue.js

来源：https://stackoverflow.com/questions/72062851/problems-with-translations-with-vue-yup-and-i18n

2条答案

按热度按时间

yqhsw0fo1#

t("field_required")在组件设置期间作为字符串传递，它不能是React式的。为了是React式的，它应该在真正需要访问消息的时候进行评估，即在模式验证期间。required等模式方法应该接受一个函数来为此目的惰性地评估消息，并且它们实际上做到了。
它应该是：

const schema = yup.object().shape({
  username: yup
    .string()
    .required(() => t("field_required"))
    ...

赞(0）回复(0）举报 2023-03-24

wj8zmpe12#

在观察者中，它看起来像这样：

watch(i18n.global.locale, () => {
     if (<TOBEVALIDATED>.meta.value.touched) <TOBEVALIDATED>.validate();
   });

meta * 和 validate 都是可以从useForm（）中描述的值，如果您使用例如vee-validate。

赞(0）回复(0）举报 2023-03-24

我来回答

使用Vue、Yup和i18n翻译的问题

2条答案

相关问题

热门标签

最新问答