如何访问Vue.js中的laravel验证错误

Question

我使用的是laravel 9和Vue 3。我正在尝试访问vue中的laravel验证错误。laravel发送的错误消息。

{message: "The given data was invalid.",…}
errors: {supplyData.supplier_id: ["Please fill the supplier field"]}
supplyData.supplier_id: ["Please fill the supplier field"]
0: "Please fill the supplier field"
message: "The given data was invalid."

我已经尝试使用以下代码来访问该错误，但没有成功。

<span
v-if="errors['supplyData.supplier_id']"

class="invalid_feedback"
style="display:block; color:red;"
role="alert"
>
{{ errors["supplyData.supplier_id"][0]}}
</span>

Answer 1

如果您检查控制台以查看来自laravel后端的真实响应，您可能会看到它在数据对象内部

假设您有类似store((的axios调用。。

在这个存储请求之后，您得到的数据就是响应。错误在此响应的数据中。

你可能可以通过以下方式找到它：response.data.errors

.catch(error => {
this.errors = error.response.data.errors; // this should be errors.
console.log(this.errors);
});