From a21e7aa2c4819172a03025f7deb96f4d172cc5cc Mon Sep 17 00:00:00 2001
From: Mark Harris <mark.harris@safelite.com>
Date: Thu, 3 Feb 2022 09:58:44 -0500
Subject: [PATCH] modelValue refactoring start

---
 .../button-question/button-question.vue       | 10 ++++++++-
 src/layouts/vehicle-year/vehicle-year.vue     |  4 ++--
 .../year-question/year-question.vue           | 21 ++++++++++++-------
 src/ux-components/list-button/list-button.vue |  7 +++++--
 4 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 7b9654139..84cee026b 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/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 {
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index 2ee00e5eb..6dd990b15 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/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,
diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue
index 36af97bca..ce79269c6 100644
--- a/src/layouts/vehicle-year/year-question/year-question.vue
+++ b/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>
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 449f464af..00e51747d 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -94,8 +94,11 @@ export default {
     },
   },
   watch: {
-    checkValue(){
-      this.$emit('isCheckedChanged', {isChecked: this.checkValue, buttonId: this.buttonID});
+    checkValue(newValue, oldValue){
+      const isInitialization = typeof(oldValue) !== 'function';
+      if (isInitialization) {
+        this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID + '' });
+      }
     }
   },
   components: {