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>
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 sign in or create an account to participate in this conversation.