From dd934f5340e112be8f030b8944d16545423db7f2 Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@zweili.ch>
Date: Sat, 4 Sep 2021 13:51:08 +0200
Subject: [PATCH] use v-model

---
 .../src/App.vue                               | 22 ++++++-------------
 1 file changed, 7 insertions(+), 15 deletions(-)

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 9bc5c2c..c6d3d02 100644
--- a/2021-07-30_composition-01-starting-setup/src/App.vue
+++ b/2021-07-30_composition-01-starting-setup/src/App.vue
@@ -4,42 +4,34 @@
     <h2>{{ user.age }}</h2>
     <button @click="setAge">Change Age</button>
     <div>
-      <input type="text" placeholder="First Name" @input="setFirstName" />
-      <input type="text" placeholder="Last Name" @input="setLastlName" />
+      <input type="text" placeholder="First Name" v-model="user.firstName" />
+      <input type="text" placeholder="Last Name" v-model="user.lastName" />
     </div>
   </section>
 </template>
 
 <script>
-import { reactive, ref, computed } from 'vue';
+import { reactive, computed } from 'vue';
 
 export default {
   setup() {
     const user = reactive({
+      firstName: '',
+      lastName: '',
       age: 23
     });
-    const firstName = ref('');
-    const lastName = ref('');
 
     user.name = computed(function() {
-      return firstName.value + ' ' + lastName.value;
+      return user.firstName + ' ' + user.lastName;
     });
 
     function setAge() {
       user.age = '25';
     }
 
-    function setFirstName(event) {
-      firstName.value = event.target.value;
-    }
-    function setLastlName(event) {
-      lastName.value = event.target.value;
-    }
     return {
       user,
-      setAge,
-      setFirstName,
-      setLastlName
+      setAge
     };
   }
 };