From 67d24d3e384cf2ab346a39a70779a4e71b80ce0d Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@zweili.ch>
Date: Sat, 4 Sep 2021 14:32:45 +0200
Subject: [PATCH] add a template ref

---
 2021-07-30_composition-01-starting-setup/src/App.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/2021-07-30_composition-01-starting-setup/src/App.vue b/2021-07-30_composition-01-starting-setup/src/App.vue
index 09784f0..8d727b9 100644
--- a/2021-07-30_composition-01-starting-setup/src/App.vue
+++ b/2021-07-30_composition-01-starting-setup/src/App.vue
@@ -6,7 +6,9 @@
     <div>
       <input type="text" placeholder="First Name" v-model="user.firstName" />
       <input type="text" placeholder="Last Name" v-model="user.lastName" />
+      <input type="text" placeholder="Last Name" ref="lastNameInput" />
     </div>
+    <button @click="setLastName">Change Lastname</button>
   </section>
 </template>
 
@@ -23,6 +25,7 @@ export default {
 
     const userAge = ref(23);
     const userName = ref('Muster');
+    const lastNameInput = ref(null);
 
     watch([userAge, userName], function(newValue, oldValue) {
       console.log('old age: ', oldValue[0]);
@@ -39,9 +42,15 @@ export default {
       user.age = '25';
     }
 
+    function setLastName() {
+      user.lastName = lastNameInput.value.value;
+    }
+
     return {
       user,
-      setAge
+      setAge,
+      setLastName,
+      lastNameInput
     };
   }
 };