How to Display Laravel Validation Errors in Vuejs 3
2 years ago
admin
Laravel
In this lesson, we will see how to display Laravel validation errors in Vue js 3, let's assume that we have a form that stores a post in the database using Vue js & Axios and we want to display validation errors, so let's see how we can do that.
Display laravel validation errors
So as we said before in the example below we have a form that sends data to the database using Axios, once we get an error we store it in an array and we loop through using the 'v-for' directive to display all the errors in the array.
<template>
<div class="col-md-7">
<div class="card my-4">
<div class="card-body">
<!-- Display laravel validation errors -->
<div class="mb-2" v-if="data.errors">
<ul v-for="(errorArray, index) in data.errors"
:key="index"
class="list-group">
<li
v-for="(error, index) in errorArray"
:key="index"
class="listgroup-item bg-danger text-white mb-1 p-2 rounded">
{{error}}
</li>
</ul>
</div>
<form @submit.prevent="addPost">
<div class="form-group mb-2">
<input
v-model="data.title"
type="text" class="form-control" placeholder="Title*">
</div>
<div class="form-group mb-2">
<textarea
v-model="data.body"
class="form-control mb-2"
cols="30" rows="5" placeholder="Body*"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">
Submit
</button>
</div>
</form>
</div>
</div>
</div>
</template>
<script setup>
import { reactive } from "vue";
const data = reactive({
title: '',
body: '',
errors: []
});
const addPost = async () => {
data.errors = [];
try {
await axios.post('/api/add/post', {
title: data.title,
body: data.body,
});
data.title = '';
data.body = '';
data.errors = [];
} catch (error) {
data.errors = error.response.data.errors;
}
}
</script>
<style>
</style>