From 5ac696e629c2e04f865ba8b4bf1dc31542a7608f Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@2li.ch>
Date: Fri, 19 Feb 2021 18:13:44 +0100
Subject: [PATCH] rewrite the control to use props and emits

---
 .../src/components/RatingControl.vue              | 15 ++++++---------
 .../src/components/TheForm.vue                    |  9 +++++++--
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/2021-02-08 2024 forms-01-starting-setup/src/components/RatingControl.vue b/2021-02-08 2024 forms-01-starting-setup/src/components/RatingControl.vue
index 9336dc3..1e21783 100644
--- a/2021-02-08 2024 forms-01-starting-setup/src/components/RatingControl.vue	
+++ b/2021-02-08 2024 forms-01-starting-setup/src/components/RatingControl.vue	
@@ -14,29 +14,26 @@
 
 <script>
 export default {
-  data() {
-    return {
-      activeOption: null
-    };
-  },
+  props: ['modelValue'],
+  emits: ['update:modelValue'],
 
   computed: {
     poorIsActive() {
-      if (this.activeOption === 'poor') {
+      if (this.modelValue === 'poor') {
         return 'active';
       } else {
         return '';
       }
     },
     averageIsActive() {
-      if (this.activeOption === 'average') {
+      if (this.modelValue === 'average') {
         return 'active';
       } else {
         return '';
       }
     },
     greatIsActive() {
-      if (this.activeOption === 'great') {
+      if (this.modelValue === 'great') {
         return 'active';
       } else {
         return '';
@@ -46,7 +43,7 @@ export default {
 
   methods: {
     activate(option) {
-      this.activeOption = option;
+      this.$emit('update:modelValue', option);
     }
   }
 };
diff --git a/2021-02-08 2024 forms-01-starting-setup/src/components/TheForm.vue b/2021-02-08 2024 forms-01-starting-setup/src/components/TheForm.vue
index ffc0b73..b9ce9fb 100644
--- a/2021-02-08 2024 forms-01-starting-setup/src/components/TheForm.vue	
+++ b/2021-02-08 2024 forms-01-starting-setup/src/components/TheForm.vue	
@@ -81,7 +81,9 @@
         />
         <label for="how-other">Other</label>
       </div>
-      <div class="form-control"><form-control></form-control></div>
+      <div class="form-control">
+        <form-control v-model="rating"></form-control>
+      </div>
       <div class="form-control">
         <input
           type="checkbox"
@@ -111,7 +113,8 @@ export default {
       referrer: 'wom',
       interest: [],
       how: null,
-      confirmTerms: false
+      confirmTerms: false,
+      rating: null
     };
   },
   methods: {
@@ -128,6 +131,8 @@ export default {
       this.how = null;
       console.log(this.confirmTerms);
       this.confirmTerms = false;
+      console.log(this.rating);
+      this.rating = null;
     }
   }
 };