Toggle button component how to reset from parent - vue.js

Question

There is a toggle component, which I connect to the parent. Found a bug, haven't found a solution yet.
toggle-button
<template>
<label :for='id + "_button"' :class='{"active": isActive}' class='toggle__button'>
<input type='checkbox' :id='id + "_button"' v-model='checkedValue'>
<span class='toggle__switch'></span>
</label>
</template>
<script>
export default ({
props: {
defaultState: {
type: Boolean,
default: false
},
id: {
type: String,
default: 'primary'
}
},
data() {
return {
currentState: this.defaultState
};
},
computed: {
isActive() {
return this.currentState;
},
checkedValue: {
get() {
return this.defaultState;
},
set(newValue) {
this.currentState = newValue;
this.$emit('change', newValue);
}
}
},
methods: {
reset() {
this.currentState = false ;
}
}
});
</script>
how can i succinctly make a reset button? I use this option now, but after reset, when I click on toggle, it does not work the first time.
<button
#click='
$refs.toggleOriginal.reset($event),
$refs.toggleAnalog.reset($event),
$refs.toggleAvailable.reset($event)
'
>
reset
</button>
Each toggle has ref in parent.

Answer 1

I think what you may be saying is that you have a toggle button that can flip a value anywhere (perhaps stored in a higher state?) and a reset button that can set the value back to it's initial default.
Keep the management of this data property handled outside of toggle, and make toggle responsible for simply flipping the value, and reset responsible for resetting it.
Here is what I would do:
// parent.vue
<template>
<div>
Toggled value: {{toggleValue}}
<resetButton v-model="toggleValue" />
<toggleButton v-model="toggleValue" />
</div>
</template>
<script>
export default {
data() {
return {
toggleValue: false,
}
}
}
</script>
// toggleButton.vue
<template>
<button #click="toggle">Toggle</button>
</template>
<script>
export default {
props: {
value: {
type: Boolean,
}
},
computed: {
toggleValue: {
get() {
return this.value;
},
set(val) {
this.$emit('input', val);
}
}
},
methods: {
toggle() {
this.toggleValue = !this.toggleValue
}
}
}
</script>
// resetButton.vue
<template>
<button #click="reset">Reset</button>
</template>
<script>
export default {
props: {
value: {
type: Boolean,
}
},
methods: {
reset() {
this.$emit('input', false);
}
}
}
</script>