从Laravel错误验证访问Axios错误

Question

构建了Laravel-API，它通过axios和VUE 3与前端进行通信。

这是我的laravel TransactionController：

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."
        ]
    }
}

像预期的那样工作，

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

我如何访问"data“属性，或者如何使它像postman的结果一样简单？

​

Answer 1

在您的函数add .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)
                });
            }