rewrite the control to use props and emits

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);
     }
   }
 };

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;
     }
   }
 };