diff --git a/src/common-components/input-button-wrapper/input-button-wrapper.vue b/src/common-components/input-button-wrapper/input-button-wrapper.vue index 59f614710..34507107b 100644 --- a/src/common-components/input-button-wrapper/input-button-wrapper.vue +++ b/src/common-components/input-button-wrapper/input-button-wrapper.vue @@ -81,17 +81,30 @@ export default { }, methods: { handleSelectionChange(event) { - // console.log(event); + console.log(event); // console.log(this.value); // console.log(this.modelValue); - let isChecked = event.target.checked; + // let isChecked = event.target.checked; // console.log("BM value: ", this.value); // let valueToEmit; - if (this.isMultiSelect && this.modelValue instanceof Array) { - let newValue = [...this.modelValue]; - if (isChecked && !this.modelValue.includes(this.value)) { + console.log("isMultiselect") + console.log(this.isMultiSelect) + console.log({ + modelValue: this.modelValue, + isMultiselect: this.isMultiSelect + }) + if (this.isMultiSelect && (this.modelValue instanceof Array || this.modelValue == null)) { + let newValue = this.modelValue ? [...this.modelValue] : []; + console.log("newValue", newValue) + console.log({ + newValue: newValue, + // isChecked: isChecked + }) + if (!newValue.includes(this.value)) { + console.log("isChecked") newValue.push(this.value); } else { + console.log("isn't checked") newValue.splice(newValue.indexOf(this.value), 1); } @@ -111,6 +124,7 @@ export default { console.log("emitting"); console.log(e); this.handleSelectionChange(e); + console.log("valueToEmit") console.log(this.valueToEmit) this.$emit("change", this.valueToEmit); }, diff --git a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue index 2b5c148ed..c5fe36eed 100644 --- a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue +++ b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue @@ -7,7 +7,7 @@ :groupName="groupName" buttonType="listCard" isRequired - v-model="selectedDamageLocations" + v-model="selectedValue" validationRules="damage-location-required" /> @@ -19,16 +19,18 @@ import store from "@/store"; import { defineRule } from "vee-validate"; import { required } from "@/helpers/validation-rules"; import { errorMessages } from "@/constants/error-messages"; +import buttonQuestionWrapperMixin from "@/mixins/button-question-wrapper-mixin" // DEFINE VALIDATION RULES defineRule("damage-location-required", required(errorMessages.DAMAGE_LOCATION_REQUIRED)); export default ({ name: "damageLocationQuestion", + mixins: [buttonQuestionWrapperMixin], data(){ return { damageOptions: {}, - selectedDamageLocations: [] + // selectedValue: [] } }, props: { @@ -74,9 +76,9 @@ export default ({ buttonQuestion, }, watch: { - selectedDamageLocations(selectedDamageLocations) { - console.log("DLQ: ", selectedDamageLocations) - this.$emit("update:modelValue", selectedDamageLocations) + selectedValue(selectedValue) { + console.log("DLQ: ", selectedValue) + this.$emit("update:modelValue", selectedValue) } } }) diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue index 674f390c8..c55cb9f0c 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.vue +++ b/src/layouts/vehicle-damage/vehicle-damage.vue @@ -17,6 +17,7 @@ alertClass="alert-warning" :isDismissible="false" /> + selectedDamageLocations: {{selectedDamageLocations}}