diff --git a/lib/KCheckbox.vue b/lib/KCheckbox.vue index f1e7a4314..4b4fa767d 100644 --- a/lib/KCheckbox.vue +++ b/lib/KCheckbox.vue @@ -14,8 +14,8 @@ type="checkbox" class="k-checkbox-input" :aria-checked="ariaChecked" - :checked="isCurrentlyChecked" - :indeterminate.prop="isCurrentlyIndeterminate" + :checked="checked" + :indeterminate.prop="indeterminate" :disabled="disabled" @click.stop="toggleCheck" @focus="isActive = true" @@ -24,13 +24,13 @@ > ({ - isCurrentlyChecked: false, - isCurrentlyIndeterminate: false, isActive: false, }), computed: { ariaChecked() { - return this.isCurrentlyIndeterminate ? 'mixed' : this.isCurrentlyChecked ? 'true' : 'false'; + return this.indeterminate ? 'mixed' : this.checked ? 'true' : 'false'; }, id() { return `k-checkbox-${this._uid}`; @@ -152,28 +150,14 @@ }; }, }, - watch: { - checked(newCheckedState) { - this.isCurrentlyChecked = newCheckedState; - }, - indeterminate(newIndeterminateState) { - this.isCurrentlyIndeterminate = newIndeterminateState; - }, - }, - created() { - this.isCurrentlyChecked = this.checked; - this.isCurrentlyIndeterminate = this.indeterminate; - }, methods: { toggleCheck(event) { if (!this.disabled) { - this.isCurrentlyChecked = !this.isCurrentlyChecked; this.$refs.kCheckboxInput.focus(); - this.isCurrentlyIndeterminate = false; /** * Emits change event */ - this.$emit('change', this.isCurrentlyChecked, event); + this.$emit('change', !this.checked, event); } }, markInactive() {