@@ -8,20 +8,59 @@
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
@@ -42,10 +81,10 @@ import vehicleQuestion from "@/layouts/vehicle-selection/vehicle-question/vehicl
import { useMainStore } from '@/store';
// Supporting files
-import BaseFormMixin from '@/mixins/base-form-mixin.js';
+import baseFormMixin from '@/mixins/base-form-mixin.js';
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
-import { Form, defineRule } from "vee-validate";
+import { Form, defineRule, useForm } from "vee-validate";
import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
@@ -57,107 +96,92 @@ defineRule("style-required", required(errorMessages.STYLE_REQUIRED));
export default {
name: "vehicle-selection",
- mixins: [BaseFormMixin],
+ mixins: [baseFormMixin],
data() {
return {
selectedYear: null,
selectedMake: null,
selectedModel: null,
- selectedStyle: null,
+ selectedStyle: null,
+ displayGeneric: true
};
},
props:{
cmsWidgetName:String,
validationRules:String,
},
-
+ setup() {
+ const { meta, validate, resetForm } = useForm();
+
+ return {
+ meta,
+ validate,
+ resetForm,
+ };
+ },
mounted(){
- this.Years.getNewValues();
+ this.$refs["vehicleYearQuestion"].getNewValues();
},
async beforeRouteEnter(to, from, next) {
- // Call APIs
- const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+ // Call APIs
+ const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
- // Settle promises and get results
- const promiseResultMap = [
- {
- resultKey: "cmsContent",
- promise: cmsContentPromise,
- },
- ];
+ // Settle promises and get results
+ const promiseResultMap = [
+ {
+ resultKey: "cmsContent",
+ promise: cmsContentPromise,
+ },
+ ];
- let resultMap = await settleAllPromises(promiseResultMap);
+ let resultMap = await settleAllPromises(promiseResultMap);
- // Call the "next" function to complete the transition to this page.
- next((vm) => {
- vm.setCmsContent(resultMap.cmsContent);
- });
-
+ // Call the "next" function to complete the transition to this page.
+ next((vm) => {
+ vm.setCmsContent(resultMap.cmsContent);
+ });
},
+
watch: {
selectedYear(value) {
this.mainStore.updateVehicleYear(value);
+
if(value)
{
- this.Makes.getNewValues();
+ this.$refs["vehicleMakeQuestion"].getNewValues();
}
else{
- this.Makes.clearValues();
+ this.$refs["vehicleMakeQuestion"].clearValues();
}
},
selectedMake(value) {
this.mainStore.updateVehicleMake(value);
if(value)
{
- this.Models.getNewValues();
+ this.$refs["vehicleModelQuestion"].getNewValues();
}
else{
- this.Models.clearValues();
+ this.$refs["vehicleModelQuestion"].clearValues();
}
},
selectedModel(value) {
this.mainStore.updateVehicleModel(value);
if(value)
{
- this.Styles.getNewValues();
+ this.$refs["vehicleStyleQuestion"].getNewValues();
}
else{
- this.Styles.clearValues();
+ this.$refs["vehicleStyleQuestion"].clearValues();
}
},
selectedStyle(value) {
this.mainStore.updateVehicleStyle(value);
+ this.mainStore.setVehicle();
+ this.$nextTick(() => {this.displayGeneric = false; this.$refs["banner"].forceRerender();});
},
},
- computed:{
- Years(){
- return this.$refs["vehicleYearQuestion"];
- },
- Makes(){
- return this.$refs["vehicleMakeQuestion"];
- },
- Models(){
- return this.$refs["vehicleModelQuestion"];
- },
- Styles(){
- return this.$refs["vehicleStyleQuestion"];
- }
-
- },
methods: {
- handleValueChange(thisQuestion, nextQuestion, storeMethod, index)
- {
- if(index === 0)
- {
- storeMethod(null);
- nextQuestion.clearValues();
- }
- else{
- storeMethod(thisQuestion.values[index]);
- nextQuestion.getNewValues();
- }
- },
arePagePrerequisitesValid() {
return true;
},
diff --git a/src/main.js b/src/main.js
index a7b26869..146ede32 100644
--- a/src/main.js
+++ b/src/main.js
@@ -38,7 +38,7 @@ useMainStore().populateInitialState();
// Additional Vue items to setup
vueApp.use(router);
vueApp.use(Maska);
-vueApp.use(LoadScript);
+vueApp.use(LoadScript);
vueApp.mixin(baseMixin);
vueApp.mixin(analyticsMixin);
vueApp.mixin(experimentMixin);