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)
-        });
     }
   }
 }