Commit Code-Pop#1:

Create EventDetails component
Add new API call to fetch single event by id
Add new EventDetails component to routes
Make EventCard clickable with router-link

Author: luft.liu

package-lock.json

@@ -1,8 +1,10 @@
 <template>
-  <div class="event-card">
-    <span>@{{ event.time }} on {{ event.date }}</span>
-    <h4>{{ event.title }}</h4>
-  </div>
+  <router-link to="/event/123">
+    <div class="event-card">
+      <span>@{{ event.time }} on {{ event.date }}</span>
+      <h4>{{ event.title }}</h4>
+    </div>
+  </router-link>
 </template>
 
 <script>

src/components/EventCard.vue

@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import EventList from '@/views/EventList.vue'
+import EventDetails from '@/views/EventDetails.vue'
 import About from '@/views/About.vue'
 
 const routes = [
@@ -8,6 +9,11 @@ const routes = [
     name: 'EventList',
     component: EventList
   },
+  {
+    path: '/event/123',
+    name: 'EventDetails',
+    component: EventDetails
+  },
   {
     path: '/about',
     name: 'About',

src/router/index.js

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

src/services/EventService.js

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <h1>{{ event.title }}</h1>
+    <p>{{ event.time }} on {{ event.date }} @ {{ event.location }}</p>
+    <p>{{ event.description }}</p>
+  </div>
+</template>
+
+<script>
+import EventService from '@/services/EventService.js'
+export default {
+  data() {
+    return {
+      event: null,
+      id: 123
+    }
+  },
+  created() {
+    // fetch event by id() and set local data
+    EventService.getEvent(this.id)
+      .then(response => {
+        this.event = response.data
+      })
+      .catch(error => {
+        console.log(error)
+      })
+  }
+}
+</script>