Changed computed, commented

src/layouts/vehicle-parts/part-question/part-question.vue

@@ -1,4 +1,5 @@
 <template>
+
 <div class="container">
     <div class="row">
         <p>Select your current {{ glassName }} color:</p>
@@ -6,16 +7,16 @@
 </div>
 
 <div class="container nested-radio" v-for="(value, name, index) in featureListData" :key="index">
+
     <div class="row my-2">
         <div class="col">
-            {{ selectedTint }}
+            <listCard v-model="selectedTint[name]" isRadio="true" isWide="true" :buttonImage="require(`@/assets/img/tints/${getTintImage(glassName, name)}`)" :buttonLabel="name" altText="" :buttonID="`${glassName}-${name}`" :groupName="`${glassName}`" @isCheckedChanged="ResetTintAndPartSelections()" />
-            <listCard v-model="selectedTint[name]" isRadio=true isWide=true :buttonImage="require(`@/assets/img/tints/${getTintImage(glassName, name)}`)" :buttonLabel="name" altText="" :buttonID="`${glassName}-${name}`" :groupName="`${glassName}`" @isCheckedChanged="TestMethod(name, $event)" />
         </div>
     </div>
-    <div v-show="selectedTint[name] != undefined && selectedTint[name].isChecked === `${glassName}-${name}`" class="row my-2">
+    
+    <div v-if="selectedTint[name] != undefined &&selectedTint[name].buttonId === `${glassName}-${name}`" class="row my-2">
         <div class="col">
-            {{ selectedPart }}
+            <buttonQuestion v-model="selectedPart[glassName]" buttonType="radio" class="radioQuestion" questionText="ok now select your features" :answers="value" textPosition="text-start" :loaderEnabled="false" isRequired="true" :groupName="`${glassName}-${name}`" />
-            <buttonQuestion v-model="selectedPart[glassName]" buttonType="radio" class="radioQuestion" questionText="ok now select your features" :answers="value" textPosition="text-start" :loaderEnabled=false isRequired=true :groupName="`${glassName}-${name}`" />
         </div>
     </div>
 
@@ -33,8 +34,8 @@ import {
 } from "@/constants/tint-mapper";
 import {
     getCustomTransformValue,
-    getCustomTransformKey
+    getCustomTransformKey,
-} from '@/constants/dynamictext-mapper';
+} from "@/constants/dynamictext-mapper";
 
 export default {
     name: "part-question",
@@ -42,8 +43,9 @@ export default {
         return {
             glassColorQuestion: String,
             glassFeatureQuestion: String,
+            featureListData: Object,
             selectedPart: {}, // v-model for the radio button selections
-            selectedTint: {} // v-model for the list card selections
+            selectedTint: {}, // v-model for the list card selections
         };
     },
     props: {
@@ -52,19 +54,17 @@ export default {
     },
     components: {
         listCard,
-        buttonQuestion
+        buttonQuestion,
     },
     computed: {
         colorQuestionText() {
             return "Backglass";
-        },
+        }
-        featureListData() {
-            return this.createFeatureListMap(this.colorAnswers);
-        },
     },
     mounted() {
-        const s = getCustomTransformKey('Select your current {custom:glassName} color')
+        this.featureListData = this.createFeatureListMap(this.colorAnswers);
-        const r = getCustomTransformValue(s, this.glassName);
+        // const s = getCustomTransformKey('Select your current {custom:glassName} color')
+        // const r = getCustomTransformValue(s, this.glassName);
     },
     methods: {
         initializeComponent(cmsContent, initialData) {
@@ -72,9 +72,10 @@ export default {
             this.glassFeatureQuestion = cmsContent.FeatureQuestion;
         },
 
+        // Creates a map of the feature list data in the correct Name/Value
+        // format for the button-question component.
         createFeatureListMap(colorAnswers) {
             const tintMapByColor = colorAnswers.reduce((arr, item) => {
-
                 // Create the key
                 const itemColor = item.ColorAnswerText;
                 arr[itemColor] = arr[itemColor] || [];
@@ -84,7 +85,7 @@ export default {
                     featureArr["Text"] = item.FeatureAnswerText;
                     featureArr["Name"] = item.PartNumber;
 
-                    return featureArr
+                    return featureArr;
                 }, {});
 
                 // Add onto the final object
@@ -96,14 +97,17 @@ export default {
             return tintMapByColor;
         },
 
+        // Gets tint images based on the glass type, and tint name
         getTintImage(glassType, tintColor) {
             const tintObject = getTintImage(glassType, tintColor);
 
             return tintObject === undefined ? "" : tintObject.src;
         },
 
-        TestMethod(name, event) {
+        // Reset selections when tint changes for the same glass
-            this.selectedTint[name] = event;
+        ResetTintAndPartSelections() {
+            this.selectedTint = {};
+            this.selectedPart = {};
         },
     },
 };
@@ -113,11 +117,11 @@ export default {
 .nested-radio {
     .ui-radio {
         flex-direction: column;
-        margin: .25rem 0;
+        margin: 0.25rem 0;
     }
 
     p {
-        font-size: .875rem;
+        font-size: 0.875rem;
     }
 }
 </style>

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

@@ -74,10 +74,14 @@ export default {
     },
     methods: {
         handleCheckChange() {
-            this.$emit('isCheckedChanged', {
+
+            const emitEvent = {
                 isChecked: this.checkValue,
                 buttonId: this.buttonID.toString()
-            });
+            };
+
+            this.$emit('isCheckedChanged', emitEvent);
+            this.$emit('update:modelValue', emitEvent);
         }
     },
     setup(props) {