CSR-762 Undo changing from computed to watch

src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue

@@ -6,7 +6,8 @@
             :answers="answersToDisplay"
             :groupName="groupName"
             buttonType="listCard"
-            v-model="selectedDamageLocations"
+            isRequired
+            v-model="selectedValues"
             validationRules="damage-location-required"
         />
     </div>
@@ -26,12 +27,11 @@ export default ({
     name: "damageLocationQuestion",
     data(){
         return {
-            damageOptions: {},
+            damageOptions: Object,
-            selectedDamageLocations: this.modelValue
         }
     },
-    props: {  
+    props: {               
-        modelValue: [Array, String, Number],             
+        modelValue: Array,
         groupName: String,
         cmsWidgetName: String,
     },
@@ -47,6 +47,14 @@ export default ({
         answersFromCms(){
             return this.getCmsContent(this.cmsWidgetName, 'Answers');
         },
+        selectedValues: {
+            get: function() {
+                return this.modelValue;
+            },
+            set: function(newValue) {
+                this.$emit("update:modelValue", newValue);
+            }
+        },
         damageOptionsMap(){
             return {
                 Windshield: true,
@@ -69,11 +77,6 @@ export default ({
             });
         },
     },
-    watch: {
-        selectedDamageLocations(selectedDamageLocations) {
-            this.$emit("update:modelValue", selectedDamageLocations);
-        }
-    },
     components: {
         buttonQuestion,
     },

src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue

@@ -8,7 +8,7 @@
                 :answers="answersToDisplay"
                 :groupName="groupName"
                 buttonType="listCard"
-                v-model="selectedReplaceOptions"
+                v-model="selectedValues"
                 :validationRules="validationRules"
                 :suppressError="suppressError"
                 :isRequired="isRequired"
@@ -23,17 +23,16 @@ import store from "@/store";
 
 export default ({
     name: "replaceOptionsQuestion",
-    data() {
+    data(){
         return {
             replaceOptions: [],
-            selectedReplaceOptions: this.modelValue
         }
     },
     props: {
-        modelValue: [Array, String, Number],
         isAvailable: Boolean,
         filterByVehicleCategory: Boolean,
         groupName: String,
+        modelValue: [Array, String, Number],
         isMultiSelect: Boolean,
         validationRules: String,
         suppressError: Boolean,
@@ -41,15 +40,13 @@ export default ({
         isRequired: Boolean,
     },
     methods: {
-        initializeComponent(replaceOptions) {
+        initializeComponent(replaceOptions){
             this.replaceOptions = replaceOptions;
         },
         updateSelectedValues() {
             // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
-            // ex: BackGlass stationary
+            if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
-            if (Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
+                this.selectedValues = [this.answersToDisplay[0].Name];
-                const selectedAnswer = this.answersToDisplay[0].Name;
-                this.selectedReplaceOptions = this.isMultiSelect ? [selectedAnswer] : selectedAnswer;
             }
         },
     },
@@ -60,6 +57,14 @@ export default ({
         answersFromCms(){
             return this.getCmsContent(this.cmsWidgetName, 'Answers');
         },
+        selectedValues: {
+            get: function() {
+                return this.modelValue;
+            },
+            set: function(newValue) {
+                this.$emit("update:modelValue", newValue);
+            }
+        },
         answersToDisplay(){
             const filteredAnswers = Array.isArray(this.answersFromCms) 
                 ? this.answersFromCms.filter(ans => 
@@ -86,11 +91,8 @@ export default ({
         },
         shouldDisplayReplaceOptionsQuestion(shouldDisplayReplaceOptionsQuestion) {
             if (!shouldDisplayReplaceOptionsQuestion) {
-                this.selectedReplaceOptions = [];
+                this.selectedValues = [];
             }
-        },
-        selectedReplaceOptions(selectedReplaceOptions) {
-            this.$emit("update:modelValue", selectedReplaceOptions);
         }
     },
     components: {

src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue

@@ -7,7 +7,7 @@
                 :groupName="groupName"
                 buttonType="listButtonHorizontal"
                 useTextForValue
-                v-model="numberOfChips"
+                v-model="selectedValue"
                 :validationRules="validationRules"
                 isRequired
             />
@@ -19,12 +19,7 @@
 import buttonQuestion from "@/common-components/button-question/button-question";
 
 export default ({
-    name: "windshieldChipCountQuestion",   
+    name: "windshieldOptions",   
-    data() {
-        return {
-            numberOfChips: this.modelValue
-        }
-    },
     props: {
         modelValue: [String, Number],
         groupName: String,
@@ -39,14 +34,18 @@ export default ({
         answersFromCms(){
             return this.getCmsContent(this.cmsWidgetName, 'Answers');
         },
+        selectedValue: {
+            get: function() {
+                return this.modelValue;
+            },
+            set: function(newValue) {
+                const numberValue = Number(newValue);
+                this.$emit("update:modelValue", numberValue);
+            }
+        },
     },
     components: {
         buttonQuestion,
-    },
-    watch: {
-        numberOfChips(numberOfChips) {
-            this.$emit("update:modelValue", numberOfChips);
-        }
     }
 })
 </script>

src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue

@@ -1,18 +1,16 @@
 <template>
     <transition name="fade" mode="out-in">
-        <div
+        <div class="windshield-damage-type-question" v-if="isAvailable" aria-live="polite">
-            class="windshield-damage-type-question"
-            v-if="isAvailable"
-            aria-live="polite">
             <buttonQuestion
                 :questionText="questionText"
                 :answers="answersFromCms"
                 :groupName="groupName"
                 buttonType="listCard"
-                v-model="selectedWindshieldDamageType"
+                v-model="selectedValues"
                 :suppressError="suppressError"
                 :validationRules="validationRules"
-                isRequired />
+                isRequired
+            />
         </div>
     </transition>
 </template>
@@ -20,13 +18,8 @@
 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
 
-export default {
+export default ({
     name: "windshieldDamageTypeQuestion",
-    data() {
-        return {
-            selectedWindshieldDamageType: this.modelValue,
-        };
-    },
     props: {
         modelValue: String,
         groupName: String,
@@ -36,20 +29,23 @@ export default {
         cmsWidgetName: String,
     },
     computed: {
-        questionText() {
+        questionText(){
-            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
+            return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
         },
-        answersFromCms() {
+        answersFromCms(){
-            return this.getCmsContent(this.cmsWidgetName, "Answers");
+            return this.getCmsContent(this.cmsWidgetName, 'Answers');
         },
-    },
+        selectedValues: {
-    watch: {
+            get: function() {
-        selectedWindshieldDamageType(selectedWindshieldDamageType) {
+                return this.modelValue;
-            this.$emit("update:modelValue", selectedWindshieldDamageType);
+            },
+            set: function(newValue) {
+                this.$emit("update:modelValue", newValue);
+            }
         },
     },
     components: {
         buttonQuestion,
-    },
+    }
-};
+})
-</script>
+</script>

src/layouts/vehicle-make/make-question/make-question.vue

@@ -1,15 +1,16 @@
 <template>
-    <buttonQuestion
+  <buttonQuestion
-        class="radioQuestion"
+    class="radioQuestion" 
-        isOverflowScrollable
+    isOverflowScrollable
-        selectingInitiatesLoad
+    selectingInitiatesLoad
-        :questionText="questionText"
+    :questionText="questionText"
-        :answers="makes"
+    :answers="makes"
-        groupName="ChooseVehicleMake"
+    groupName="ChooseVehicleMake"
-        textPosition="text-start"
+    textPosition="text-start"
-        v-model="selectedMake"
+    v-model="selectedValue"
-        :selectOnKeypress="false"
+    :selectOnKeypress="false"
-        isRequired />
+    isRequired
+  />
 </template>
 
 <script>
@@ -20,40 +21,42 @@ import { storeActions } from "@/constants/store-actions.js";
 import baseMixin from "@/mixins/base-mixin.js";
 
 export default {
-    name: "make-question",
+  name: "make-question",
-    data() {
+  data() {
-        return {
+    return {
-            makes: [],
+      makes: [],
-            selectedMake: ""
+    };
-        };
+  },
+  props: {
+    modelValue: String,
+    cmsWidgetName: String,
+  },
+  computed: {
+    questionText(){
+      return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
     },
-    props: {
+    selectedValue: {
-        modelValue: String,
+      get: function() {
-        cmsWidgetName: String,
+        return this.modelValue
+      },
+      set: function(newValue) {
+        this.$emit("update:modelValue", newValue);
+      }
+    }
+  },
+  components: {
+    buttonQuestion,
+  },
+  methods: {
+    loadInitialData() {
+      return baseMixin.methods.dispatchStoreAction(
+        storeActions.GET_VEHICLE_MAKES,
+        { year: store.getters.vehicle.year }
+      );
     },
-    computed: {
+    initializeComponent(initialData) {
-        questionText() {
+      this.makes = initialData;
-            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
-        },
-    },
-    components: {
-        buttonQuestion,
-    },
-    methods: {
-        loadInitialData() {
-            return baseMixin.methods.dispatchStoreAction(
-                storeActions.GET_VEHICLE_MAKES,
-                { year: store.getters.vehicle.year }
-            );
-        },
-        initializeComponent(initialData) {
-            this.makes = initialData;
-        },
-    },
-    watch: {
-        selectedMake(selectedMake) {
-            this.$emit("update:modelValue", selectedMake);
-        },
     },
+  },
 };
 </script>

src/layouts/vehicle-model/model-question/model-question.vue

@@ -7,7 +7,7 @@
     :answers="models"
     groupName="ChooseVehicleModel"
     textPosition="text-start"
-    v-model="selectedModel"
+    v-model="selectedValue"
     :selectOnKeypress="false"
     isRequired
   />
@@ -25,7 +25,6 @@ export default {
   data() {
     return {
       models: [],
-      selectedModel: ""
     };
   },
   props: {
@@ -36,6 +35,14 @@ export default {
     questionText(){
       return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
     },
+    selectedValue: {
+      get: function() {
+        return this.modelValue
+      },
+      set: function(newValue) {
+        this.$emit("update:modelValue", newValue);
+      }
+    }
   },
   components: {
     buttonQuestion,
@@ -51,10 +58,5 @@ export default {
       this.models = initialData;
     },
   },
-  watch: {
-    selectedModel(selectedModel) {
-      this.$emit("update:modelValue", selectedModel);
-    }
-  }
 };
 </script>

src/layouts/vehicle-style/style-question/style-question.vue

@@ -7,8 +7,7 @@
     :answers="styles"
     groupName="ChooseVehicleStyle"
     textPosition="text-start"
-    v-model="selectedStyle"
+    v-model="selectedValue"
-    :selectOnKeypress="false"
     isRequired
   />
 </template>
@@ -25,16 +24,24 @@ export default {
   data() {
     return {
       styles: [],
-      selectedStyle: ""
     };
   },
   props: {
+    modelValue: String,
     cmsWidgetName: String,
   },
   computed: {
     questionText(){
       return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
     },
+    selectedValue: {
+      get: function() {
+        return this.modelValue
+      },
+      set: function(newValue) {
+        this.$emit("update:modelValue", newValue);
+      }
+    }
   },
   components: {
     buttonQuestion,
@@ -54,10 +61,5 @@ export default {
       this.styles = initialData;
     },
   },
-  watch: {
-    selectedStyle(selectedStyle) {
-      this.$emit("update:modelValue", selectedStyle);
-    }
-  }
 };
 </script>

src/layouts/vehicle-year/year-question/year-question.vue

@@ -1,18 +1,15 @@
 <template>
-  <div>
+  <buttonQuestion
-    <buttonQuestion
+    class="radioQuestion"
-      class="radioQuestion"
+    isOverflowScrollable
-      isOverflowScrollable
+    selectingInitiatesLoad
-      selectingInitiatesLoad
+    :questionText="questionText"
-      :questionText="questionText"
+    :answers="years"
-      :answers="years"
+    groupName="ChooseVehicleYear"
-      groupName="ChooseVehicleYear"
+    textPosition="text-start"
-      textPosition="text-start"
+    v-model="selectedValue"
-      v-model="selectedYear"
+    isRequired
-      :selectOnKeypress="false"
+  />
-      isRequired
-    />
-  </div>
 </template>
 
 <script>
@@ -20,25 +17,32 @@ import buttonQuestion from "@/common-components/button-question/button-question"
 // Supporting files
 import { storeActions } from "@/constants/store-actions.js";
 import baseMixin from "@/mixins/base-mixin.js";
-
 export default {
   name: "year-question",
   data() {
     return {
       years: [],
-      selectedYear: ""
     };
   },
   props: {
+    modelValue: String,
     cmsWidgetName: String,
   },
   components: {
-    buttonQuestion    
+    buttonQuestion,
   },
   computed: {
-    questionText() {
+    questionText(){
-      return this.getCmsContent(this.cmsWidgetName, "QuestionText");
+      return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
     },
+    selectedValue: {
+      get: function() {
+        return this.modelValue
+      },
+      set: function(newValue) {
+        this.$emit("update:modelValue", newValue);
+      }
+    }
   },
   methods: {
     loadInitialData() {
@@ -51,10 +55,5 @@ export default {
       this.years = initialData;
     },
   },
-  watch: {
-    selectedYear(selectedYear) {
-      this.$emit("update:modelValue", selectedYear);
-    }
-  }
 };
 </script>