Yup validation -> TypeError: Cannot read properties of undefined (reading 'forEach') at eval (changePassword.vue?18d1:231:1)

Question

我正在尝试做一个修改密码的界面。其中需要旧密码、新密码和重新输入的新密码，并且新密码和重新输入的新密码应该相同。

这是我的 Yup 模式：

const changePasswordSchema = yup.object().shape({
    passwordValueOld: yup.string().required('Debe ingresar su contraseña actual'),
    newPasswordValue: yup.string().required('Debe ingresar la nueva contraseña'),
    retypePassword: yup
    .string()
    .oneOf([yup.ref('newPasswordValue'), null], 'Las nuevas contraseñas no coinciden')
    .required('Debe confirmar la nueva contraseña'),
});

我有以下数据：

data() {
    return {
        usernameValue: 'Usuario',
        rutValue: 'xxxxxxx-x',
        nombreValue: 'Nombre',
       passwordFieldTypeOld: 'password',
       passwordFieldTypeNew: 'password',
       passwordFieldTypeRetype: 'password',
       success: false,
        values: {
            passwordValueOld: '',
            newPasswordValue: '',
            retypePassword: '',
        },
        errors: {
             passwordValueOld: '',
             newPasswordValue: '',
             retypePassword: '',
        },
    };
},

验证函数如下：

validate(field) {
    changePasswordSchema
    .validateAt(field, this.values)
    .then(() => {
        this.errors[field] = '';
    })
    .catch((err) => {
        this.errors[err.path] = err.message;
    });
},

我验证输入的函数如下：

async changePassword() {
    changePasswordSchema
    .validate(this.values, { abortEarly: false })
    .then(async () => {
        const check = await checkPassword(this.usernameValue, this.values.passwordValueOld);
        if ((await check.status) !== 200) {
            throw 'La contraseña actual, no es correcta';
        } else this.success = true;
        // Solicitud para cambiar contraseña
        // const answer = await changePassword(this.usernameValue, this.rutValue, this.nombreValue, this.newPasswordValue);
        // if ((await answer.status) === 200) {
        // // SUCCESS
        // }
    })
    .catch((err) => {
    console.log(err);
    err.inner.forEach((error) => {
        this.errors = { ...this.errors, [error.path]: error.message };
    });
});

想法是验证后，检查旧密码是否与数据库中的相同，但是当所有输入正确时，我得到以下错误：

TypeError: Object(...) is not a function
    at _callee$ (changePassword.vue?18d1:218:1)
    at tryCatch (runtime.js?96cf:63:1)
    at Generator.invoke [as _invoke] (runtime.js?96cf:294:1)
    at Generator.eval [as next] (runtime.js?96cf:119:1)
    at asyncGeneratorStep (asyncToGenerator.js?1da1:3:1)
    at _next (asyncToGenerator.js?1da1:25:1)
    at eval (asyncToGenerator.js?1da1:32:1)
    at new Promise (<anonymous>)
    at eval (asyncToGenerator.js?1da1:21:1)

changePassword.vue?18d1:231 Uncaught (in promise) TypeError: Cannot read properties of
undefined (reading 'forEach')
    at eval (changePassword.vue?18d1:231:1)

在这一点上我知道它的 changePassword 中的验证函数要捕获...但我不知道为什么

Answer 1

最后。问题不在于 .vue 文件中的代码，而在于从另一个文件导出 checkPassword 函数。

我把辅助函数写成：

async function checkPassword(username, password){
 /*CODE*/
}

export default { checkPassword }

解决它的方法是在函数本身之前放置和导出，如下所示：

export async function checkPassword(username, password){
 /*CODE*/
}

export default { checkPassword }

Yup validation -> TypeError: Cannot read properties of undefined (reading 'forEach') at eval (changePassword.vue?18d1:231:1)

Yup validation -> TypeError: Cannot read properties of undefined (reading 'forEach') at eval (changePassword.vue?18d1:231:1)

javascript

vue.js

yup