diff --git a/aleksis/apps/kolego/frontend/components/AbsenceReasonGroupSelect.vue b/aleksis/apps/kolego/frontend/components/AbsenceReasonGroupSelect.vue index 2151a35178ff4d13de1b897cfa10c16ecb7fac27..d7bf38f19c00aa6f7da7c5be4c76dd68fc89b347 100644 --- a/aleksis/apps/kolego/frontend/components/AbsenceReasonGroupSelect.vue +++ b/aleksis/apps/kolego/frontend/components/AbsenceReasonGroupSelect.vue @@ -10,6 +10,7 @@ export default { data() { return { absenceReasons: [], + innerValue: undefined, }; }, apollo: { @@ -52,14 +53,28 @@ export default { ); }, }, + mounted() { + this.innerValue = this.value; + }, + watch: { + value(newValue) { + this.innerValue = newValue; + }, + }, + methods: { + updateInnerValue($event) { + this.innerValue = $event; + this.$emit("input", $event); + }, + }, }; </script> <template> <v-chip-group column - :value="value" - @change="$emit('input', $event)" + :value="innerValue" + @change="updateInnerValue" mandatory v-if="showChips" > @@ -71,7 +86,7 @@ export default { outlined > {{ $t("kolego.absence_reason.present") }} - <v-avatar right v-if="loadSelectedChip && value === emptyValue"> + <v-avatar right v-if="loadSelectedChip && innerValue === emptyValue"> <v-progress-circular indeterminate :size="16" :width="2" /> </v-avatar> </v-chip> @@ -81,7 +96,7 @@ export default { :absence-reason="absenceReason" filter outlined - :loading="loadSelectedChip && absenceReason.id === value" + :loading="loadSelectedChip && absenceReason.id === innerValue" /> </v-chip-group> <v-skeleton-loader v-else type="chip@4" class="d-flex flex-wrap gap" />