using v-model is eaiser/faster

basics-assignment-4-problem/app.js

@@ -5,6 +5,7 @@ const app = Vue.createApp({
         return {
             user1: false,
             user2: false,
+            inputClass: "",
             paragraphVisible: true,
             paragraphHidden: false,
             inputColor: "",
@@ -21,25 +22,10 @@ const app = Vue.createApp({
         },
     },
     methods: {
-        getUserInput(event) {
-            const inputValue = event.target.value;
-            if (inputValue === "user1") {
-                this.user1 = true;
-            } else if (inputValue === "user2") {
-                this.user2 = true;
-            } else {
-                this.user1 = false;
-                this.user2 = false;
-            }
-        },
         toggleParagraphVisibility() {
             this.paragraphVisible = !this.paragraphVisible;
             this.paragraphHidden = !this.paragraphHidden;
         },
-        setBackgroundColor(event) {
-            console.log(event.target.value);
-            this.inputColor = event.target.value;
-        },
     },
 });
 

basics-assignment-4-problem/index.html

@@ -18,7 +18,7 @@
     <section id="assignment">
         <!-- 1) Fetch the user input and use it as a CSS class -->
         <!-- The entered class should be added to the below paragraph -->
-        <input type="text" @input="getUserInput" />
+        <input type="text" v-model="inputClass" />
         <!-- (available classes: "user1", "user2") -->
         <p :class="classFromUserInput">
             Style me!
@@ -28,7 +28,7 @@
         <!-- Clicking the button should toggle between the two options -->
 
         <!-- 3) Add dynamic inline styling to the below paragraph and let the user enter a background-color -->
-        <input type="text" @input="setBackgroundColor" />
+        <input type="text" v-model="inputColor" />
         <p :style="{backgroundColor: inputColor}">Style me inline!</p>
     </section>
 </body>