Lesson 11 - Reactive Sets

src/components/MailTable.vue

@@ -1,18 +1,22 @@
 <template>
+  <h1>{{emailSelection.emails.size}} emails selected</h1>
   <table class="mail-table">
     <tbody>
       <tr v-for="email in unarchivedEmails"
           :key="email.id"
-          :class="['clickable', email.read ? 'read' : '']"
+          :class="['clickable', email.read ? 'read' : '']">
-          @click="openEmail(email)">
         <td>
-          <input type="checkbox" />
+          <input type="checkbox"
+                 @click="emailSelection.toggle(email)"
+                 :selected="emailSelection.emails.has(email)" />
         </td>
-        <td>{{email.from}}</td>
+        <td @click="openEmail(email)">{{email.from}}</td>
-        <td>
+        <td @click="openEmail(email)">
           <p><strong>{{email.subject}}</strong> - {{email.body}}</p>
         </td>
-        <td class="date">{{format(new Date(email.sentAt), 'MMM do yyyy')}}</td>
+        <td class="date" @click="openEmail(email)">
+          {{format(new Date(email.sentAt), 'MMM do yyyy')}}
+        </td>
         <td><button @click="archiveEmail(email)">Archive</button></td>
       </tr>
     </tbody>
@@ -27,11 +31,26 @@
   import axios from 'axios';
   import MailView from '@/components/MailView.vue';
   import ModalView from '@/components/ModalView.vue';
+  import { reactive } from 'vue';
 
   export default {
     async setup(){
       let {data: emails} = await axios.get('http://localhost:3000/emails')
+
+      let selected = reactive(new Set())
+      let emailSelection = {
+        emails: selected,
+        toggle(email) {
+          if(selected.has(email)) {
+            selected.delete(email)
+          } else {
+            selected.add(email)
+          }
+          console.log(selected)
+        }
+      }
       return {
+        emailSelection,
         format,
         emails,
         openedEmail: null