From 97812b321b63fac1932830a9200265126d2c9e46 Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@2li.ch>
Date: Mon, 18 Jan 2021 21:28:07 +0100
Subject: [PATCH] add a watcher example

---
 .../app.js                                    | 28 +++++++++++++++----
 .../index.html                                |  1 +
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/basics-05-using-the-native-event-object/app.js b/basics-05-using-the-native-event-object/app.js
index e47cc51..d913d87 100644
--- a/basics-05-using-the-native-event-object/app.js
+++ b/basics-05-using-the-native-event-object/app.js
@@ -3,15 +3,33 @@ const app = Vue.createApp({
         return {
             counter: 0,
             name: "",
+            lastName: "",
+            fullName: "",
         };
     },
-    computed: {
-        fullName() {
-            if (this.name === "") {
-                return "";
+    watch: {
+        name(value) {
+            if (value === "") {
+                this.fullName = "";
+            } else {
+                this.fullName = value + " " + this.lastName;
             }
-            return this.name + " " + "Muster";
         },
+        lastName(value) {
+            if (value === "") {
+                this.fullName = "";
+            } else {
+                this.fullName = this.name + " " + value;
+            }
+        },
+    },
+    computed: {
+        // fullName() {
+        //     if (this.name === "") {
+        //         return "";
+        //     }
+        //     return this.name + " " + "Muster";
+        // },
     },
     methods: {
         setName(event) {
diff --git a/basics-05-using-the-native-event-object/index.html b/basics-05-using-the-native-event-object/index.html
index 625f97d..4317e63 100644
--- a/basics-05-using-the-native-event-object/index.html
+++ b/basics-05-using-the-native-event-object/index.html
@@ -21,6 +21,7 @@
         <button v-on:click="reduce(5)">Subtract 5</button>
         <p>Result: {{ counter }}</p>
         <input type="text" v-model="name">
+        <input type="text" v-model="lastName">
         <button v-on:click="resetInput">Reset Input</button>
         <p>Your Name: {{ fullName }}</p>
     </section>