Video 5 - MailView

src/components/MailTable.vue

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