diff --git a/src/components/form-checkbox/form-checkbox.js b/src/components/form-checkbox/form-checkbox.js index 3acd621bea5..39d1a9a350d 100644 --- a/src/components/form-checkbox/form-checkbox.js +++ b/src/components/form-checkbox/form-checkbox.js @@ -102,16 +102,19 @@ export const BFormCheckbox = /*#__PURE__*/ Vue.extend({ } this.computedLocalChecked = localChecked - // Change is only emitted on user interaction - this.$emit('change', localChecked) + // Fire events in a `$nextTick()` to ensure the `v-model` is updated + this.$nextTick(() => { + // Change is only emitted on user interaction + this.$emit('change', localChecked) - // If this is a child of ``, - // we emit a change event on it as well - if (this.isGroup) { - this.bvGroup.$emit('change', localChecked) - } + // If this is a child of ``, + // we emit a change event on it as well + if (this.isGroup) { + this.bvGroup.$emit('change', localChecked) + } - this.$emit('update:indeterminate', indeterminate) + this.$emit('update:indeterminate', indeterminate) + }) }, setIndeterminate(state) { // Indeterminate only supported in single checkbox mode diff --git a/src/components/form-radio/form-radio.js b/src/components/form-radio/form-radio.js index 025dcbbff71..e653e22a3fb 100644 --- a/src/components/form-radio/form-radio.js +++ b/src/components/form-radio/form-radio.js @@ -31,11 +31,9 @@ export const BFormRadio = /*#__PURE__*/ Vue.extend({ } }, computed: { - // Radio Groups can only have a single value, so determining if checked is simple isChecked() { return looseEqual(this.value, this.computedLocalChecked) }, - // Flags for form-radio-check mixin isRadio() { return true }, @@ -44,21 +42,30 @@ export const BFormRadio = /*#__PURE__*/ Vue.extend({ } }, watch: { - // Radio Groups can only have a single value, so our watchers are simple - computedLocalChecked() { - this.$emit('input', this.computedLocalChecked) + computedLocalChecked(newValue, oldValue) { + if (!looseEqual(newValue, oldValue)) { + this.$emit('input', newValue) + } } }, methods: { handleChange({ target: { checked } }) { - const value = this.value + const { value } = this + const localChecked = checked ? value : null + this.computedLocalChecked = value - // Change is only emitted on user interaction - this.$emit('change', checked ? value : null) - // If this is a child of form-radio-group, we emit a change event on it as well - if (this.isGroup) { - this.bvGroup.$emit('change', checked ? value : null) - } + + // Fire events in a `$nextTick()` to ensure the `v-model` is updated + this.$nextTick(() => { + // Change is only emitted on user interaction + this.$emit('change', localChecked) + + // If this is a child of ``, + // we emit a change event on it as well + if (this.isGroup) { + this.bvGroup.$emit('change', localChecked) + } + }) } } })