From 4f5c71dcf9f629654787536a9322eaad8dfb2fc4 Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Thu, 13 Oct 2022 15:01:05 -0400
Subject: [PATCH] CSR-762 Refactor to use v-model

---
 .../base-input-button/base-input-button.vue   |  7 +------
 .../button-question/button-question.vue       |  9 ++-------
 src/mixins/input-button-wrapper-mixin.js      | 19 ++++++++++++-------
 .../list-button-horizontal.vue                |  2 +-
 src/ux-components/list-button/list-button.vue |  2 +-
 src/ux-components/list-card/list-card.vue     |  2 +-
 src/ux-components/radio/radio.vue             |  2 +-
 7 files changed, 19 insertions(+), 24 deletions(-)

diff --git a/src/common-components/base-input-button/base-input-button.vue b/src/common-components/base-input-button/base-input-button.vue
index 8cd50278e..c7c2291ce 100644
--- a/src/common-components/base-input-button/base-input-button.vue
+++ b/src/common-components/base-input-button/base-input-button.vue
@@ -30,11 +30,6 @@ import inputButtonWrapperMixin from "../../mixins/input-button-wrapper-mixin";
 
 export default {
     name: "base-input-button",
-    emits: ["change", "inputButtonClicked"],
-    model: {
-        prop: "modelValue",
-        event: "change",
-    },
     props: {
         // ...inputButtonWrapperMixin.props
         value: {
@@ -132,7 +127,7 @@ export default {
         },
         handleClick(e) {
             this.handleSelectionChange(e);
-            this.$emit("inputButtonClicked", this.valueToEmit);
+            this.$emit("update:modelValue", this.valueToEmit);
         },
         handleFocus() {
             this.$root.handleInputFocus({
diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index a20ff376e..eb198c93f 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -45,7 +45,6 @@
                             :groupName="answer.groupName"
                             :isMultiSelect="isMultiSelect"
                             :value="answer.value"
-                            :modelValue="modelValue"
                             :selectingInitiatesLoad="selectingInitiatesLoad"
                             :isWide="isWide"
                             :validationRules="validationRules"
@@ -54,7 +53,8 @@
                             :lastValuePushedToGa="lastValuePushedToGa"
                             :setLastValuePushedToGa="setLastValuePushedToGa"
                             :shouldPushClickEventToGAOnMount="shouldPushClickEventToGAOnMount"
-                            @inputButtonClicked="handleAnswerChange" />
+                            v-model="selectedValues"
+                            />
                         <!-- For nested questions -->
                         <transition name="fade" mode="out-in">
                             <div
@@ -229,11 +229,6 @@ export default {
                         : this.formatString(answer.toString());
             }
         },
-        handleAnswerChange(selectedAnswers) {
-            this.selectedValues = selectedAnswers;
-
-            this.$emit("buttonQuestionChange", selectedAnswers);
-        },
         setLastValuePushedToGa(lastValuePushedToGa) {
             this.lastValuePushedToGa = lastValuePushedToGa;
         },
diff --git a/src/mixins/input-button-wrapper-mixin.js b/src/mixins/input-button-wrapper-mixin.js
index a5d1a66d2..eae27c2fe 100644
--- a/src/mixins/input-button-wrapper-mixin.js
+++ b/src/mixins/input-button-wrapper-mixin.js
@@ -22,15 +22,20 @@ export default {
         },
         lastValuePushedToGa: [String, Number],
         setLastValuePushedToGa: Function,
-        shouldPushClickEventToGAOnMount: Boolean
+        shouldPushClickEventToGAOnMount: Boolean,
     },
-    methods: {
-        handleAnswerChange(e) {
-            if (this.preHandleAnswerChange) {
-                this.preHandleAnswerChange(e);
-            }
+    computed: {
+        selectedValue: {
+            get() {
+                return this.modelValue;
+            },
+            set(e) {
+                if (this.preHandleAnswerChange) {
+                    this.preHandleAnswerChange(e);
+                }
 
-            this.$emit("change", e);
+                this.$emit("update:modelValue", e);
+            },
         },
     },
 };
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index 9deee6e7e..c0371f9f7 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -5,7 +5,7 @@
             'list-group list-button-horizontal d-flex flex-column w-100',
             { 'radio-fancy': isCashOrInsurance },
         ]"
-        @inputButtonClicked="handleAnswerChange">
+        v-model="selectedValue">
         <div
             class="list-button-horizontal-content d-flex flex-column justify-content-center p-3">
             <span class="m-0" :class="textPosition">
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 44ead9b3f..54ef98b35 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -2,7 +2,7 @@
     <baseInputButton
         v-bind="$props"
         buttonWrapperClasses="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
-        @inputButtonClicked="handleAnswerChange">
+        v-model="selectedValue">
         <div
             :aria-label="buttonLabel"
             class="list-button-content d-flex flex-column justify-content-center py-3 px-4">
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index c49c4ce05..7e27a6476 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -5,7 +5,7 @@
             'list-card w-100 rounded-3 d-flex align-items-center h-100',
             { horizontal: isWide },
         ]"
-        @inputButtonClicked="handleAnswerChange">
+        v-model="selectedValue">
         <div
             class="d-flex w-100 align-items-center px-2 h-100 list-card-content"
             :class="labelClasses">
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index ea72d6895..0d120de39 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -3,7 +3,7 @@
         v-bind="$props"
         buttonWrapperClasses="ui-radio form-check"
         inputClasses="form-check-input"
-        @inputButtonClicked="handleAnswerChange">
+        v-model="selectedValue">
         <div class="d-flex align-items-start form-check-label">
             <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
             <span v-if="screenReaderOnlyText" class="sr-only">{{