Calling API for Single Event Data

Author: Gregg

src/services/EventService.js

@@ -12,5 +12,8 @@ const apiClient = axios.create({
 export default {
   getEvents() {
     return apiClient.get('/events')
+  },
+  getEvent(id) {
+    return apiClient.get('/events/' + id)
   }
 }

src/views/EventShow.vue

@@ -1,8 +1,24 @@
 <template>
-  <h1>Showing event #{{ id }}</h1>
+  <h1>Showing event {{ event.title }}</h1>
 </template>
 <script>
+import EventService from '@/services/EventService.js'
+
 export default {
-  props: ['id']
+  props: ['id'],
+  data() {
+    return {
+      event: []
+    }
+  },
+  mounted() {
+    EventService.getEvent(this.id)
+      .then(response => {
+        this.event = response.data
+      })
+      .catch(error => {
+        console.log('There was an error:', error.response)
+      })
+  }
 }
 </script>