Axios catch error not show Hi, I'm trying to show error when name or description is blank but it not showing in . I'm following this lesson https://laracasts.com/series/learn-vue-2-step-by-step/episodes/19
Can you help me review my code and explain why it not work ?
My create.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.css">
<style>body { padding-top: 40px; }</style>
</head>
<body>
<div id="app" class="container">
@include ('projects.list')
<form method="POST" action="/projects" @submit.prevent="onSubmit">
<div class="control">
<label for="name" class="label">Project Name:</label>
<input type="text" id="name" name="name" class="input" v-model="name">
<span class="help is-danger" v-text="errors.get('name')"></span>
</div>
<div class="control">
<label for="description" class="label">Project Description:</label>
<input type="text" id="description" name="description" class="input" v-model="description">
</div>
<div class="control">
<button class="button is-primary">Create</button>
</div>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.js"></script>
<script src="https://unpkg.com/[email protected] /dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected] "></script>
<script src="/js/app.js"></script>
</body>
</html>
My app.js
class Errors {
constructor() {
this.errors = {};
}
has(field) {
return this.errors.hasOwnProperty(field);
}
get(field) {
if(this.errors[field]) {
return this.errors[field][0];
}
}
record(errors) {
this.errors = errors;
}
}
new Vue({
el: '#app',
data: {
name: '',
description: '',
errors: new Errors()
},
methods: {
onSubmit() {
axios.post('/projects', this.$data)
.then(response => alert('Success'))
.catch(error => this.errors.record(error.response.data));
}
}
});
Thank you
@flyforever123 Have you tried just console logging error.response.data to see what shows up in the inspector's console? I know this might be considered a little brutish, but:
methods: {
onSubmit() {
axios.post('/projects', this.$data)
.then(response => alert('Success'))
.catch(error => console.log(error.response.data));
}
}
That will at least prove that you are or are not getting what you expect back from your application.
It looks like you're giving your Errors class the entire response object, instead of just the errors.
methods: {
onSubmit() {
axios.post('/projects', this.$data)
.then(response => alert('Success'))
.catch(error => this.errors.record(error.response.data.errors));
}
}
Please sign in or create an account to participate in this conversation.
