From 150c0f7de1839f0ea22b8f41dd6033470c868de3 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Tue, 4 Jun 2019 21:18:13 +0100
Subject: [PATCH] Display validation errors
---
src/components/SessionForm.vue | 12 +++++++++---
1 file changed, 9 insertions(+), 3 deletions(-)
diff --git a/src/components/SessionForm.vue b/src/components/SessionForm.vue
index 20a5c1e..bc7f264 100644
--- a/src/components/SessionForm.vue
+++ b/src/components/SessionForm.vue
@@ -2,6 +2,12 @@
<section class="mt-8">
<h3 class="text-2xl font-semibold mb-4">Submit a Session</h3>
+ <div v-if="errors.length" class="bg-red-100 border border-red-300 p-4 mb-6">
+ <ul class="list-disc list-inside ml-3">
+ <li v-for="error, i in errors" :key="i">{{ error.detail }}</li>
+ </ul>
+ </div>
+
<form action="" @submit.prevent="submit">
<label class="block mb-4">
Title
@@ -24,6 +30,7 @@ import axios from 'axios'
export default {
data () {
return {
+ errors: [],
form: {
body: '',
title: '',
@@ -62,10 +69,9 @@ export default {
.then(({ data }) => {
this.form.body = ''
this.form.title = ''
+ .catch(error => {
+ this.errors = error.response.data.errors || []
})
- .catch(function (error) {
- console.log(error)
- });
}
}
}