In my Vue.js app, I have a custom SwitchButton component that triggers a 'toggle' event when clicked. This event toggles the isEnabled property to true or false. However, I'm facing an issue when trying to set the initial value of isEnabled in the parent component.
Here is the code used in the parent component:
<SwitchButton v-model="distSwitch" :isEnabled="true">
<label slot="left">{{ $t('general.dealer') }}</label>
<label slot="right">{{ $t('general.wholesale') }}</label>
</SwitchButton>
Code for the SwitchButton component:
<template>
<div class="switch-button-control">
<div class="switch-button-label">
<slot name="left"></slot>
</div>
<div class="switch-button" :class="{'enabled': isEnabled}" @click="toggle">
<div class="button"></div>
</div>
<div class="switch-button-label">
<slot name="right"></slot>
</div>
</div>
</template>
<script>
export default {
name: 'SwitchButton',
model: {
prop: 'isEnabled',
event: 'toggle'
},
props: {
isEnabled: {
type: Boolean,
required: true
}
},
methods: {
toggle() {
this.$emit("toggle", !this.isEnabled);
}
},
created() {
/*eslint-disable no-console*/
console.log('isEnabled', this.isEnabled)
}
}
</script>
Although I expect the console.log statement to output "isEnabled > true," it actually prints "false" instead. What am I missing here?