Merge pull request #191 from Safelite/feature/v-model_refactoring

Feature/v model refactoring

src/common-components/button-question/button-question.vue

@@ -30,7 +30,7 @@
               :altText="answer.Name ? answer.Name : answer"
               screenReaderOnlyText="(opens new window)"
               :colLength="this.answers.length < 3 ? '' : '-4'"
-              v-model="modelValue"
+              v-model="selectedValues"
               data-test="button"
             />
           </div>
@@ -98,6 +98,14 @@ export default {
       }
       return classes;
     },
+    selectedValues: {
+      get: function() {
+        return this.modelValue;
+      },
+      set: function(newValue) {
+        this.$emit("update:modelValue", newValue);
+      }
+    },
   },
   data(){
     return {

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

@@ -7,7 +7,7 @@
             :answers="answersToDisplay"
             :groupName="groupName"
             buttonType="listCard"
-            v-model="modelValue"
+            v-model="selectedValues"
         />
     </div>
 </template>
@@ -39,6 +39,14 @@ export default ({
         }
     },
     computed: {
+        selectedValues: {
+            get: function() {
+                return this.modelValue;
+            },
+            set: function(newValue) {
+                this.$emit("update:modelValue", newValue);
+            }
+        },
         damageOptionsMap(){
             return {
                 Windshield: true,
@@ -56,11 +64,6 @@ export default ({
                 : [];
         },
     },
-    watch: {
-        modelValue(val) {
-        this.$emit("update:modelValue", val);
-        }
-    },
     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="modelValue"
+                v-model="selectedValues"
             />
         </div>
     </transition>
@@ -43,6 +43,14 @@ export default ({
         }
     },
     computed: {
+        selectedValues: {
+            get: function() {
+                return this.modelValue;
+            },
+            set: function(newValue) {
+                this.$emit("update:modelValue", newValue);
+            }
+        },
         answersToDisplay(){
             return  Array.isArray(this.answersFromCms) 
                 ? this.answersFromCms.filter(ans => 
@@ -53,11 +61,6 @@ export default ({
                 : [];
         },
     },
-    watch: {
-        modelValue(val) {
-        this.$emit("update:modelValue", val);
-        }
-    },
     components: {
         buttonQuestion,
     }

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

@@ -7,7 +7,7 @@
     groupName="Choose Vehicle Make"
     textPosition="text-start"
     :loaderEnabled="true"
-    v-model="modelValue"
+    v-model="selectedValueAsArray"
     isRequired=true
   />
 </template>
@@ -28,7 +28,19 @@ export default {
     };
   },
   props: {
-    modelValue: Array,
+    modelValue: String,
+  },
+  computed: {
+    selectedValueAsArray: {
+      get: function() {
+        const modelValueAsArray = this.modelValue ? [this.modelValue] : null;
+        return modelValueAsArray;
+      },
+      set: function(newValue) {
+        const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null;
+        this.$emit("update:modelValue", newValueAsScalar);
+      }
+    }
   },
   components: {
     buttonQuestion,
@@ -45,10 +57,5 @@ export default {
       this.makes = initialData;
     },
   },
-  watch: {
-    modelValue(val) {
-      this.$emit("update:modelValue", val);
-    },
-  },
 };
 </script>

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

@@ -33,7 +33,7 @@ export default {
   name: "vehicle-make",
   data() {
     return {
-      selectedMake: [],
+      selectedMake: String,
     };
   },
   computed: {},

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

@@ -7,7 +7,7 @@
     groupName="Choose Vehicle Model"
     textPosition="text-start"
     :loaderEnabled="true"
-    v-model="modelValue"
+    v-model="selectedValueAsArray"
     isRequired=true
   />
 </template>
@@ -28,7 +28,19 @@ export default {
     };
   },
   props: {
-    modelValue: Array,
+    modelValue: String,
+  },
+  computed: {
+    selectedValueAsArray: {
+      get: function() {
+        const modelValueAsArray = this.modelValue ? [this.modelValue] : null;
+        return modelValueAsArray;
+      },
+      set: function(newValue) {
+        const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null;
+        this.$emit("update:modelValue", newValueAsScalar);
+      }
+    }
   },
   components: {
     buttonQuestion,
@@ -45,10 +57,5 @@ export default {
       this.models = initialData;
     },
   },
-  watch: {
-    modelValue(val) {
-      this.$emit("update:modelValue", val);
-    },
-  },
 };
 </script>

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

@@ -33,7 +33,7 @@ export default {
   name: "vehicle-model",
   data() {
     return {
-      selectedModel: [],
+      selectedModel: String,
     };
   },
   computed: {},

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

@@ -7,7 +7,7 @@
     groupName="Choose Vehicle Style"
     textPosition="text-start"
     :loaderEnabled="true"
-    v-model="modelValue"
+    v-model="selectedValueAsArray"
     isRequired=true
   />
 </template>
@@ -28,7 +28,19 @@ export default {
     };
   },
   props: {
-    modelValue: Array,
+    modelValue: String,
+  },
+  computed: {
+    selectedValueAsArray: {
+      get: function() {
+        const modelValueAsArray = this.modelValue ? [this.modelValue] : null;
+        return modelValueAsArray;
+      },
+      set: function(newValue) {
+        const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null;
+        this.$emit("update:modelValue", newValueAsScalar);
+      }
+    }
   },
   components: {
     buttonQuestion,
@@ -49,10 +61,5 @@ export default {
       this.styles = initialData;
     },
   },
-  watch: {
-    modelValue(val) {
-      this.$emit("update:modelValue", val);
-    },
-  },
 };
 </script>

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

@@ -32,7 +32,7 @@ export default {
   name: "vehicle-style",
   data() {
     return {
-      selectedStyle: [],
+      selectedStyle: String,
     };
   },
   computed: {},

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

@@ -28,7 +28,7 @@ export default {
   name: "vehicle-year",
   data() {
     return {
-      selectedYear: [],
+      selectedYear: String,
     };
   },
   computed: {},
@@ -73,7 +73,7 @@ export default {
 
   watch: {
     selectedYear(year) {
-
+      
       this.$store.commit(this.storeMutations.UPDATE_YEAR, year);
       this.$router.navigateAfterSave(
         this.navigationScenarios.SELECTED_YEAR,

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

@@ -7,7 +7,7 @@
     groupName="Choose Vehicle Year"
     textPosition="text-start"
     :loaderEnabled="true"
-    v-model="modelValue"
+    v-model="selectedValueAsArray"
     isRequired=true
   />
 </template>
@@ -26,12 +26,24 @@ export default {
     };
   },
   props: {
-    modelValue: Array,
+    modelValue: String,
   },
   emits: ['update:modelValue'],
   components: {
     buttonQuestion,
   },
+  computed: {
+    selectedValueAsArray: {
+      get: function() {
+        const modelValueAsArray = this.modelValue ? [this.modelValue] : null;
+        return modelValueAsArray;
+      },
+      set: function(newValue) {
+        const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null;
+        this.$emit("update:modelValue", newValueAsScalar);
+      }
+    }
+  },
   methods: {
     loadInitialData() {
       return baseMixin.methods.dispatchNonBlockingStoreAction(
@@ -44,10 +56,5 @@ export default {
       this.years = initialData;
     },
   },
-  watch: {
-    modelValue(val) {
-      this.$emit("update:modelValue", val);
-    },
-  },
 };
 </script>

src/ux-components/list-button-horizontal/list-button-horizontal.vue

@@ -92,8 +92,11 @@ export default {
     },
   },
   watch: {
-    checkValue(){
+    checkValue(newValue, oldValue){
-      this.$emit('isCheckedChanged', {isChecked: this.checkValue, buttonId: this.buttonID});
+      const isInitialization = typeof(oldValue) !== 'function';
+      if (isInitialization) {
+        this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID + '' });
+      }
     }
   },
   components: {

src/ux-components/list-button/list-button.vue

@@ -94,8 +94,11 @@ export default {
     },
   },
   watch: {
-    checkValue(){
+    checkValue(newValue, oldValue){
-      this.$emit('isCheckedChanged', {isChecked: this.checkValue, buttonId: this.buttonID});
+      const isInitialization = typeof(oldValue) !== 'function';
+      if (isInitialization) {
+        this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID + '' });
+      }
     }
   },
   components: {

src/ux-components/list-card/list-card.vue

@@ -94,8 +94,11 @@ export default {
     },
   },
   watch: {
-    checkValue(){
+    checkValue(newValue, oldValue){
-      this.$emit('isCheckedChanged', {isChecked: this.checkValue, buttonId: this.buttonID});
+      const isInitialization = typeof(oldValue) !== 'function';
+      if (isInitialization) {
+        this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID + '' });
+      }
     }
   },
   setup(props) {