unmatched vehicle and validation

unmatched vehicle and validation

src/digital-components/dropdown-question/dropdown-question.vue

@@ -26,7 +26,7 @@
                 {{ value }}
             </option>
         </select>
-        <div v-show="errorMessage" class="row mt-2 form-test-error">
+        <div v-show="errorMessage && this.disableValidation" class="row mt-2 form-test-error">
             <span aria-atomic="true" aria-live="polite">{{ errorMessage }}</span>
         </div>
     </div>
@@ -56,6 +56,11 @@ export default {
             required: false,
             default: false,
         },
+        disableValidationIfElementDisabled: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
     },
     setup(props) {
         const uuid = uuidv4();
@@ -110,6 +115,9 @@ export default {
                 this.$emit("update:modelValue", newValue);
             },
         },
+        disableValidation() {
+            return this.disableValidationIfElementDisabled ? !this.isDisabled : true;
+        },
     },
     watch: {
         selectedOption(newValue) {

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

@@ -1,5 +1,9 @@
 <template>
-    <dropdownQuestion disableAutoFill v-model="selectedValue" :valueAsKey="true" />
+    <dropdownQuestion
+        disableAutoFill
+        v-model="selectedValue"
+        :valueAsKey="true"
+        :disableValidationIfElementDisabled="true" />
 </template>
 
 <script>

src/layouts/vehicle/vehicle.vue

@@ -29,7 +29,6 @@
                                     :isDisabled="!makeOptions.length"
                                     :options="makeOptions"
                                     cmsWidgetName="VehicleMakeQuestion"
-                                    v-validate="{ rules: 'required', disabled: !makeOptions.length }"
                                     validationRules="make-required"
                                     placeHolderText="Select make"
                                     inputId="makeQuestionField" />
@@ -41,7 +40,6 @@
                                     cmsWidgetName="VehicleModelQuestion"
                                     :isDisabled="!modelOptions.length"
                                     :options="modelOptions"
-                                    v-validate="{ rules: 'required', disabled: !modelOptions.length }"
                                     validationRules="model-required"
                                     placeHolderText="Select model"
                                     inputId="modelQuestionField" />
@@ -53,7 +51,6 @@
                                     cmsWidgetName="VehicleStyleQuestion"
                                     :isDisabled="!styleOptions.length"
                                     :options="styleOptions"
-                                    v-validate="{ rules: 'required', disabled: !styleOptions.length }"
                                     validationRules="style-required"
                                     placeHolderText="Select style"
                                     inputId="styleQuestionField" />
@@ -102,34 +99,10 @@ import { storeActions } from "@/constants/store-actions.js";
 import baseMixin from "@/mixins/base-mixin.js";
 
 //define validation rules
-defineRule("year-required", (value) => {
+defineRule("year-required", required(errorMessages.YEAR_REQUIRED));
-    if (!value || !value.length ) {
+defineRule("make-required", required(errorMessages.MAKE_REQUIRED));
-        return errorMessages.YEAR_REQUIRED;
+defineRule("model-required", required(errorMessages.MODEL_REQUIRED));
-    }
+defineRule("style-required", required(errorMessages.STYLE_REQUIRED));
-    return true;
-});
-defineRule("make-required", (value) => {
-    if (!value || !value.length) {
-        return errorMessages.MAKE_REQUIRED;
-    }
-    return true;
-});
-defineRule("model-required", (value) => {
-    if (!value || !value.length) {
-        return errorMessages.MODEL_REQUIRED;
-    }
-    return true;
-});
-defineRule("style-required", (value) => {
-    if (!value || !value.length) {
-        return errorMessages.STYLE_REQUIRED;
-    }
-    return true;
-});
-// defineRule("year-required", required(errorMessages.YEAR_REQUIRED));
-// defineRule("make-required", required(errorMessages.MAKE_REQUIRED));
-// defineRule("model-required", required(errorMessages.MODEL_REQUIRED));
-// defineRule("style-required", required(errorMessages.STYLE_REQUIRED));
 
 export default {
     name: "vehicle",
@@ -141,7 +114,7 @@ export default {
             selectedStyle: this.selectedStylefromStore(),
             carId: null,
             category: null,
-            imageUrl: null,
+            imageUrl: this.getImagefromStore(),
             imageVifNumber: null,
             imageVifColor: null,
             yearOptions: [],
@@ -149,7 +122,6 @@ export default {
             modelOptions: [],
             styleOptions: [],
             displayGeneric: this.displayGenericFromStore(),
-            unmatchedVehicleIcon: false,
         };
     },
 
@@ -319,17 +291,19 @@ export default {
                 this.imageUrl = result?.data.imageUrl;
                 this.imageVifNumber = result?.data.imageVifNumber;
                 this.imageVifColor = result?.data.imageVifColor;
-                if (this.imageUrl == null) {
+                if (this.imageUrl == null) this.displayGeneric = false;
-                    this.displayGeneric = false;
-                    this.unmatchedVehicleIcon = true;
-                } else this.unmatchedVehicleIcon = false;
             } else {
                 this.imageUrl = null;
                 this.displayGeneric = true;
             }
         },
     },
-
+    computed: {
+        unmatchedVehicleIcon() {
+            if (this.imageUrl == null) return true;
+            else return false;
+        },
+    },
     methods: {
         getVehicle(year, make, model, style) {
             return this.dispatchStoreAction(this.storeActions.GET_VEHICLE, {
@@ -410,6 +384,9 @@ export default {
                 model: model,
             });
         },
+        getImagefromStore() {
+            return store.getters.vehicle.imageUrl;
+        },
     },
 
     components: {