Tengo una aplicación Vue.js (con Vite) donde uso Vee-validate con Yup para la validación de formularios y uso i18n para la traducción de mensajes. Sin embargo, los errores personalizados en el esquema no se actualizan en tiempo real cuando el usuario configura $i18n.locale='xx'
Esquema:
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")) }) Los mensajes impresos directamente en la plantilla con $t("message") funcionan normalmente.
Versiones:
"dependencies": { "vee-validate": "^4.5.11", "vue": "^3.2.33", "vue-i18n": "^9.1.9", "yup": "^0.32.11" }t("field_required") se pasa como una cadena durante la configuración del componente, no puede ser reactivo. Para que sea reactivo, debe evaluarse en el momento en que realmente se necesita acceder a un mensaje, es decir, durante la validación del esquema. Se espera que los métodos de esquema required , etc. acepten una función para evaluar un mensaje de forma perezosa para este propósito, y en realidad lo hacen.
Debería ser:
const schema = yup.object().shape({ username: yup .string() .required(() => t("field_required")) ...