Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

raphyabak's avatar

Validation error not displaying in vue frontend

Please my validation errors are not displaying on the form input but it's logging in the console This is my vue view.

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Create Company</div>

                    <div class="card-body">
                        <form @submit.prevent="createCompany">

                            <div class="row mb-3">
                                <label for="name" class="col-md-4 col-form-label text-md-end">Name</label>

                                <div class="col-md-6">
                                    <input id="name" type="text" class="form-control" v-model="company.name" required
                                        autocomplete="name" autofocus>
                                    <span class="invalid-feedback" role="alert" v-if="errors && errors.name">
                                        <strong>{{ errors.name[0] }}</strong>
                                    </span>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label for="address" class="col-md-4 col-form-label text-md-end">Address</label>
                                <div class="col-md-6">
                                    <textarea id="address" type="text" class="form-control" rows="2"
                                        v-model="company.address" required></textarea>
                                    <span class="invalid-feedback" role="alert" v-if="errors && errors.address">
                                        <strong>{{ errors.address[0] }}</strong>
                                    </span>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label for="email" class="col-md-4 col-form-label text-md-end">Email Address</label>
                                <div class="col-md-6">
                                    <input id="email" type="email" class="form-control" v-model="company.email" required
                                        autocomplete="email">
                                    <span class="invalid-feedback" role="alert" v-if="errors && errors.email">
                                        <strong>{{ errors.email[0] }}</strong>
                                    </span>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label for="website" class="col-md-4 col-form-label text-md-end">Website</label>
                                <div class="col-md-6">
                                    <input id="website" type="text" class="form-control" v-model="company.website"
                                        required>
                                    <span class="invalid-feedback" role="alert" v-if="errors && errors.website">
                                        <strong>{{ errors.website[0] }}</strong>
                                    </span>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label for="logo" class="col-md-4 col-form-label text-md-end">Company Logo</label>
                                <div class="col-md-6">
                                    <input id="logo" type="file" class="form-control" @change="selectFile" >
                                    <span class="invalid-feedback" role="alert" v-if="errors && errors.logo">
                                        <strong>{{ errors.logo[0] }}</strong>
                                    </span>
                                </div>
                            </div>
                            <div class="row mb-0">
                                <div class="col-md-8 offset-md-4">
                                    <button type="submit" class="btn btn-primary">
                                        Create
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            company: {
                logo:"",
            },
            file: '',
            errors: {}
        }
    },
    methods: {
        selectFile(event) {
            this.company.logo = event.target.files[0];
        },
        createCompany() {
            const config = {
                headers: { 'content-type': 'multipart/form-data' }
            }          
            axios
                .post('/api/companies', this.company, config)
                .then(response => (
                    this.$router.push({ name: 'companies-api.index' })             
                ))
                .catch(error => {
                    if (error.response.status == 422) {
                        this.errors = error.response.data.errors;
                    }
                    console.log(this.errors);
                });      
        }
    }
}
</script>
0 likes
1 reply
mcadio's avatar

I'm unsure why, but it could have to do with the serious nesting. How about instead using a simple foreach errors as error loop, and see if it displays that way. You could also try {{ dd(errors) }} and comment out the current errors display code to see if that is the issue.

Please or to participate in this conversation.