From 4cff30d3455d555fef7a273c0436a698ac8fd9ef Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@2li.ch>
Date: Wed, 13 Jan 2021 21:49:34 +0100
Subject: [PATCH] add example Vue app

---
 .../gs-01-starting-project/app.js               | 17 +++++++++++++++++
 .../gs-01-starting-project/index.html           |  7 ++++---
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/gs-01-starting-project/gs-01-starting-project/app.js b/gs-01-starting-project/gs-01-starting-project/app.js
index 00ffb10..c618056 100644
--- a/gs-01-starting-project/gs-01-starting-project/app.js
+++ b/gs-01-starting-project/gs-01-starting-project/app.js
@@ -1,5 +1,22 @@
 "use strict";
 
+Vue.createApp({
+    data() {
+        return {
+            goals: [],
+            enteredValue: "",
+        };
+    },
+    methods: {
+        addGoal() {
+            if (this.enteredValue !== "") {
+                this.goals.push(this.enteredValue);
+            }
+            this.enteredValue = "";
+        },
+    },
+}).mount("#app");
+
 // const buttonEl = document.querySelector("button");
 // const inputEl = document.querySelector("input");
 // const listEl = document.querySelector("ul");
diff --git a/gs-01-starting-project/gs-01-starting-project/index.html b/gs-01-starting-project/gs-01-starting-project/index.html
index 68813d6..71587eb 100644
--- a/gs-01-starting-project/gs-01-starting-project/index.html
+++ b/gs-01-starting-project/gs-01-starting-project/index.html
@@ -12,13 +12,14 @@
     <div id="app">
         <div>
             <label for="goal">Goal</label>
-            <input type="text" id="goal" />
-            <button>Add Goal</button>
+            <input type="text" id="goal" v-model="enteredValue" />
+            <button v-on:click="addGoal">Add Goal</button>
         </div>
         <ul>
-            <li>Test</li>
+            <li v-for="goal in goals">{{ goal }}</li>
         </ul>
     </div>
+    <script src="https://unpkg.com/vue@next"></script>
     <script src="app.js"></script>
 </body>