opening an email below the table

src/components/MailTable.vue

@@ -4,7 +4,7 @@
       <tr v-for="email in unarchivedEmails" 
           :key="email.id"
           :class="[email.read ? 'read': '', 'clickable']"
-          @click="readEmail(email)">
+          @click="openEmail(email)">
         <td>
           <input type="checkbox" />
         </td>
@@ -17,21 +17,29 @@
       </tr>
     </tbody>
   </table>
+
+  <MailView :email="openedEmail" v-if="openedEmail" />
 </template>
 
 <script>
   import { format } from 'date-fns';
   import axios from 'axios';
+  import MailView from '@/components/MailView.vue';
 
   export default {
     async setup(){
       let response = await axios.get('http://localhost:3000/emails');
       let emails = response.data;
+      let openedEmail = null;
       return {
         format,
-        emails
+        emails,
+        openedEmail
       }
     },
+    components: {
+      MailView
+    },
     computed: {
       unarchivedEmails(){
         return this.sortedEmails.filter(e => !e.archived)
@@ -43,9 +51,10 @@
       }
     },
     methods: {
-      readEmail(email){
+      openEmail(email){
         email.read = true
         axios.put(`http://localhost:3000/emails/${email.id}`, email)
+        this.openedEmail = email;
       },
       archiveEmail(email){
         email.archived = true;

src/components/MailView.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="email-display" v-if="email">
+    <h2 class="mb-0">Subject: <strong>{{email.subject}}</strong></h2>
+    <div><em>From {{email.from}} on {{format(new Date(email.sentAt), 'MMM do yyyy')}}</em></div>
+    <div v-html="marked(email.body)" />
+  </div>
+</template>
+
+<script>
+  import { format } from 'date-fns';
+  import marked from 'marked';
+
+  export default {
+    setup(){
+      return {
+        format,
+        marked
+      }
+    },
+    props: {
+      email: {
+        type: Object,
+        required: true
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>