vue shopping list

met18001 · Feb 24, 2020 · b9aed9c · b9aed9c
1 parent 0a5ec7f
commit b9aed9c
Showing 1 changed file with 62 additions and 0 deletions.
diff --git a/week-5/index.html b/week-5/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vue Shopping List</title>
+</head>
+<body>
+
+
+    <main id="app">
+        <h1>{{listTitle}}</h1>
+        <!--form-->
+        <!--Submit is doing the same thing as adding an event listener for the add button and clicking the enter key-->
+        <form @submit.prevent="addItem">
+        <input type="text" name="" id="" v-model="newItem">
+        <button type="submit">Add</button>
+
+
+        </form>
+        <hr>
+
+        <ul>
+            <li v-for="item in listItems">
+                <input type="checkbox" name="" id="">
+                <span>{{ item }}</span>
+                <a href="#" @click.prevent="deleteItem(item)">x</a>
+
+            </li>
+        </ul>
+
+    </main>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+    var app = new Vue({
+    el: '#app',
+    data: {
+        listTitle: 'Home Depot Shopping List',
+        listItems: [
+            'nails',
+            'hammer'
+        ], 
+        newItem:'',
+    }, 
+    methods:{
+        addItem(){
+            this.listItems.push(this.newItem);
+            this.newItem = '';
+        },
+        deleteItem(itemName){
+            //alert(itemName)
+            this.listItems.splice(itemName,1);
+        }
+    }
+    });   
+
+
+    </script>
+</body>
+</html>