1 files changed, 21 insertions(+), 34 deletions(-)

M public/index.html

@@ 11,7 11,7 @@
       <h1>Grocery list</h1>
     </heading>
     <main id="app">
-      <table>
+      <table v-if="itemsLoaded">
         <thead>
           <tr>
             <th>Priority</th>


@@ 27,54 27,41 @@
           </tr>
         </tbody>
       </table>
-      <p id="loading" style="display: block">… loading items …</p>
+      <p id="loading" v-else>… loading items …</p>
     </main>
 
     <script>
       const priorities = ["Today", "Soon", "Later"];
 
+      let testData = [
+        {
+          id: 0,
+          priority: 1,
+          section: "produce",
+          name: "apples"
+        },
+        {
+          id: 1,
+          priority: 2,
+          section: "pantry",
+          name: "coffee beans"
+        }
+      ];
+
       const groceries = new Vue({
         el: "#app",
         data: {
-          heading: "items",
-          items: [
-            {
-              id: 0,
-              priority: 1,
-              section: "produce",
-              name: "apples"
-            },
-            {
-              id: 1,
-              priority: 2,
-              section: "pantry",
-              name: "coffee beans"
-            }
-          ]
+          items: {}
         },
+        computed: { itemsLoaded: vm => vm.items.length >= 0 },
         filters: {
           titleCase: s => s.charAt(0).toUpperCase() + s.slice(1),
           priorityToString: i => priorities[i] || "Undefined"
         },
-        mounted: () => {
-          toggleVisibility("#loading");
-          console.log("Mounted");
-        },
-        beforeUpdate: () => {
-          console.log("Updating");
-          toggleVisibility("#loading");
-        },
-        updated: () => {
-          toggleVisibility("#loading");
-          console.log("Updated");
+        mounted: function() {
+          this.items = testData;
         }
       });
-
-      function toggleVisibility(sel) {
-        let e = document.querySelector(sel);
-        if (e.style.display == "block") e.style.display = "none";
-        else e.style.display = "block";
-      }
     </script>
   </body>
 </html>