refactor

src/layouts/policy-vehicles/policy-vehicles.vue

@@ -51,11 +51,12 @@ export default {
     data() {
     return {
         selectedVehicleVin: "",
-        displayGeneric: false,
+        displayGeneric: true,
         bailout: false
     }
     },
     mounted() {
+        // clear previously selected vehicle so that the blurred vehicle image displays on page entry
         useMainStore().resetVehicleState();
     },
     async beforeRouteEnter(to, from, next)
@@ -173,24 +174,30 @@ export default {
         },
         watch: {
             async selectedVehicleVin(value) {
-                const vehicle = await this.lookupVehicleByVin(value);
                 if (value === "Vehicle not listed") {
+                    // clear previously selected vehicle and image
                     this.mainStore.resetVehicleState();
+                    this.displayGeneric = true;
                 }
-                this.mainStore.updateVehicle(vehicle.data);
+
+                else {
+                    // get vehicle details from selected vin
+                    const vehicle = await this.lookupVehicleByVin(value);
+                    // save selected vehicle to the store
+                    this.mainStore.updateVehicle(vehicle.data);
+                    this.displayGeneric = false;
 
                     const styleOptions = await this.mainStore.getVehicleStyles(
                         vehicle.data.year,
                         vehicle.data.make, 
                         vehicle.data.model
                     )
-    
+                    // if there is more than 1 style for the selected vehicle, display blurred image
                     if (styleOptions.length > 1) {
                         this.displayGeneric = true;
                     }
-                
+                }
             }
-
         },     
         components: {
             siteHeader,