diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 7b9654139..84cee026b 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -30,7 +30,7 @@ :altText="answer.Name ? answer.Name : answer" screenReaderOnlyText="(opens new window)" :colLength="this.answers.length < 3 ? '' : '-4'" - v-model="modelValue" + v-model="selectedValues" data-test="button" /> @@ -98,6 +98,14 @@ export default { } return classes; }, + selectedValues: { + get: function() { + return this.modelValue; + }, + set: function(newValue) { + this.$emit("update:modelValue", newValue); + } + }, }, data(){ return { diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue index 2ee00e5eb..6dd990b15 100644 --- a/src/layouts/vehicle-year/vehicle-year.vue +++ b/src/layouts/vehicle-year/vehicle-year.vue @@ -28,7 +28,7 @@ export default { name: "vehicle-year", data() { return { - selectedYear: [], + selectedYear: String, }; }, computed: {}, @@ -73,7 +73,7 @@ export default { watch: { selectedYear(year) { - + this.$store.commit(this.storeMutations.UPDATE_YEAR, year); this.$router.navigateAfterSave( this.navigationScenarios.SELECTED_YEAR, diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue index 36af97bca..ce79269c6 100644 --- a/src/layouts/vehicle-year/year-question/year-question.vue +++ b/src/layouts/vehicle-year/year-question/year-question.vue @@ -7,7 +7,7 @@ groupName="Choose Vehicle Year" textPosition="text-start" :loaderEnabled="true" - v-model="modelValue" + v-model="selectedValueAsArray" isRequired=true /> @@ -26,12 +26,24 @@ export default { }; }, props: { - modelValue: Array, + modelValue: String, }, emits: ['update:modelValue'], components: { buttonQuestion, }, + computed: { + selectedValueAsArray: { + get: function() { + const modelValueAsArray = this.modelValue ? [this.modelValue] : null; + return modelValueAsArray; + }, + set: function(newValue) { + const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null; + this.$emit("update:modelValue", newValueAsScalar); + } + } + }, methods: { loadInitialData() { return baseMixin.methods.dispatchNonBlockingStoreAction( @@ -44,10 +56,5 @@ export default { this.years = initialData; }, }, - watch: { - modelValue(val) { - this.$emit("update:modelValue", val); - }, - }, }; diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue index 449f464af..00e51747d 100644 --- a/src/ux-components/list-button/list-button.vue +++ b/src/ux-components/list-button/list-button.vue @@ -94,8 +94,11 @@ export default { }, }, watch: { - checkValue(){ - this.$emit('isCheckedChanged', {isChecked: this.checkValue, buttonId: this.buttonID}); + checkValue(newValue, oldValue){ + const isInitialization = typeof(oldValue) !== 'function'; + if (isInitialization) { + this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID + '' }); + } } }, components: {