add an input field

basics-03-events-starting-code/app.js

@@ -2,9 +2,13 @@ const app = Vue.createApp({
     data() {
         return {
             counter: 0,
+            name: "",
         };
     },
     methods: {
+        setName(event) {
+            this.name = event.target.value;
+        },
         increaseCounter(inputNumber) {
             this.counter = this.counter + inputNumber;
         },

basics-03-events-starting-code/index.html

@@ -20,6 +20,8 @@
         <button v-on:click="increaseCounter(10)">Add 10</button>
         <button v-on:click="decreaseCounter(5)">Reduce 5</button>
         <p>Result: {{ counter }}</p>
+        <input type="text" v-on:input="setName">
+        <p>Your Name: {{name}}</p>
     </section>
 </body>