从 Laravel 错误验证访问 Axios 错误答案

【问题标题】：Accessing Axios error from Laravel error validation从 Laravel 错误验证访问 Axios 错误
【发布时间】：2021-08-13 07:24:11
【问题描述】：

我构建了通过 axios 和 VUE 3 与前端通信的 Laravel-API

这是我的 laravel 事务控制器：

public function store(TransactionRequest $request)
    {
        try {
            $transaction = Transaction::create($request->all());

            return response()->json([
                'message' => 'Transaction created.',
                'data' => $transaction
            ], Response::HTTP_OK);
        } catch (QueryException $e) {
            return response()->json([
                'message' => $e->errorInfo
            ], Response::HTTP_INTERNAL_SERVER_ERROR);
        }

    }

我正在使用来自 FormRequest 的自定义验证：

public function rules()
    {
        return [
            'title' => 'required',
            'amount' => ['required', 'numeric'],
            'type' => ['required', 'in:expense,revenue']
        ];
    }

    protected function failedValidation(\Illuminate\Contracts\Validation\Validator $validator)
    {
        $response = new JsonResponse([
                    'message' => 'The given data is invalid', 
                    'errors' => $validator->errors()
        ], 422);

        throw new \Illuminate\Validation\ValidationException($validator, $response);
    }

这是我的 Create.vue ：

<script>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'

export default {
    setup() {
        const transaction = reactive({
            title: '',
            amount: '',
            time: '',
            type: ''
        });

        const validation = ref([]);

        const router = useRouter();

        function store() {
            axios.post('http://127.0.0.1:8000/api/transaction', transaction)
            .then(() => {
                router.push({
                    name: 'transaction.index'
                });
            }).catch((err) => {
                validation.value = err.response.data
                console.log(validation)
            });
        }

        return {
            transaction,
            validation,
            router,
            store
        }
    }
}
</script>

我使用 post man 尝试了我的 API，结果如下：

{
    "message": "The given data is invalid",
    "errors": {
        "title": [
            "The title field is required."
        ],
        "amount": [
            "The amount field is required."
        ],
        "type": [
            "The type field is required."
        ]
    }
}

按预期工作，

但是当我尝试控制台登录浏览器时，结果很复杂，像嵌套的对象和数组，请看图

我怎样才能访问“数据”属性或如何让它像邮递员的结果一样简单？

【问题讨论】：

标签： axios vuejs3 laravel-api

【解决方案1】：

在您的函数中添加 .errors，这将返回来自您的后端的所有错误，如下所示。如果我理解你的问题

function store() {
                axios.post('http://127.0.0.1:8000/api/transaction', transaction)
                .then(() => {
                    router.push({
                        name: 'transaction.index'
                    });
                }).catch((err) => {
                    validation.value = err.response.data.errors // added .errors
                    console.log(validation)
                });
            }

【讨论】：