lession 34: computed properties in classes

basics-10-styling-starting-setup/app.js

@@ -8,6 +8,17 @@ const app = Vue.createApp({
             boxCSelected: false,
         };
     },
+    computed: {
+        classesBoxA() {
+            return { active: this.boxASelected };
+        },
+        classesBoxB() {
+            return { active: this.boxBSelected };
+        },
+        classesBoxC() {
+            return { active: this.boxCSelected };
+        },
+    },
     methods: {
         boxSelected(box) {
             if (box === "A") {

basics-10-styling-starting-setup/index.html

@@ -16,9 +16,9 @@
         <h1>Vue Dynamic Styling</h1>
     </header>
     <section id="styling">
-        <div class="demo" :class="{active: boxASelected}" @click="boxSelected('A')"></div>
-        <div class="demo" :class="{active: boxBSelected}" @click="boxSelected('B')"></div>
-        <div class="demo" :class="{active: boxCSelected}" @click="boxSelected('C')"></div>
+        <div class="demo" :class="classesBoxA" @click="boxSelected('A')"></div>
+        <div class="demo" :class="classesBoxB" @click="boxSelected('B')"></div>
+        <div class="demo" :class="classesBoxC" @click="boxSelected('C')"></div>
     </section>
 </body>