Laravel数组字段验证错误在VueJS中如何正确获取？

问题场景 #

在Laravel+VueJS项目中，为职位发布的roles_and_responsibilities数组字段设置了如下验证规则：

public function rules(): array
{
    return [
        'roles_and_responsibilities'   => ['required'], 
        'roles_and_responsibilities.*' => ['required'], 
    ];
}

通过Axios提交请求后，Laravel返回的数组元素验证错误格式为扁平的字符串键：

"roles_and_responsibilities.0": [
    "The roles_and_responsibilities.0 field is required."
]

无法通过err.response.data.errors.roles_and_responsibilities.0[0]的方式获取错误信息，普通字段的点语法处理方式不适用。

解决方案 #

方法1：直接使用方括号访问指定索引的错误 #

如果明确数组索引，可通过字符串键的方括号语法直接取值：

.catch((err) => {
    // 处理普通字段
    errors.title = err.response.data.errors?.title?.[0] || '';
    // 处理数组第一个元素的错误
    errors.roles_and_responsibilities[0] = err.response.data.errors?.['roles_and_responsibilities.0']?.[0] || '';
});

这种方式适合固定长度的数组，动态长度场景下灵活性不足。

方法2：遍历错误对象，动态转换为嵌套数组格式 #

针对动态长度的数组，遍历所有错误键，将扁平的字符串键转换为嵌套数组结构：

.catch((err) => {
    // 初始化错误对象，确保数组字段存在
    errors = {
        title: '',
        roles_and_responsibilities: []
    };

    const serverErrors = err.response.data.errors || {};
    Object.keys(serverErrors).forEach(key => {
        const errorMsg = serverErrors[key][0];
        // 判断是否为数组字段的错误
        if (key.includes('roles_and_responsibilities.')) {
            // 拆分键名获取索引
            const [field, index] = key.split('.');
            errors[field][index] = errorMsg;
        } else {
            // 普通字段赋值
            errors[key] = errorMsg;
        }
    });
});

处理后即可通过errors.roles_and_responsibilities[0]、errors.roles_and_responsibilities[1]等方式访问对应索引的错误信息。

优化Laravel验证规则（可选） #

补充数组类型验证，确保提交的是合法数组结构：

public function rules(): array
{
    return [
        'roles_and_responsibilities'   => ['required', 'array', 'min:1'], 
        'roles_and_responsibilities.*' => ['required'], 
    ];
}

这能避免提交非数组格式时的额外错误，让验证逻辑更严谨。

内容的提问来源于stack exchange，提问作者PMConcepcion