Vue、Yup 和 i18n 的翻译问题

Question

我有一个 Vue.js 应用程序（带有 Vite），我在其中使用 Vee-validate 和 Yup 进行表单验证，并使用 i18n 进行消息翻译。但是，当用户设置 $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"
}

Answer 1

t("field_required") 在组件设置期间作为字符串传递，它不能是反应式的。为了反应，应该在真正需要访问消息时对其进行评估，即在模式验证期间。预计 required，等等模式方法接受一个函数来懒惰地评估消息，他们确实这样做了。

应该是：

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

Vue、Yup 和 i18n 的翻译问题

Problems with translations with Vue, Yup and i18n

javascript

vue.js

vue-i18n

yup

vite