toggleEnable(event) {
let shouldEnable = event ? event.target.checked : false
if (typeof event === 'boolean') {
this.isEnabled = event;
}
if (shouldEnable !== this.autoCampaign.enabled) {
this.updateSettings({
enabled: shouldEnable
})
}
},<div id="switch-wrapper">
<span>enabled</span>
<span class="switch">
<input name="auto_campaign[enabled]" type="hidden" value="0">
<input id="enabled" class="switch-input" type="checkbox" value="1"
name="auto_campaign[enabled]" v-model="isEnabled"
@change="toggleEnable" />
<label class="switch-paddle enable-button" for="enabled"></label>
</span>
</div>Issue with the code is The status is displayed always as "enabled" even if the toggle is off. But i need to show a separate message as The status should be "disabled" when the toggle is on OFF position.
I saw that this can be achieved through v-if and v-else. but not sure how to proceed
The v-if and v-else implementation will be as below.
Please note v-else should be added to the next of v-if or else v-else wont work.
You just need to depend on your v-model value isEnabled. This will automatically be updated when you change the checkbox. You dont need to update it seperately through toggleEnable function
new Vue({
el: "#app",
data: {
isEnabled: false
},
methods: {
toggleEnable(event) {
// let shouldEnable = event ? event.target.checked : false
// if (typeof event === 'boolean') {
// this.isEnabled = event;
// }
// if (shouldEnable !== this.autoCampaign.enabled) {
// this.updateSettings({
// enabled: shouldEnable
// })
// }
},
}
})<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<div id="app">
<div id="switch-wrapper">
<span v-if="isEnabled">enabled</span>
<span v-else>disabled</span>
<span class="switch">
<input name="auto_campaign[enabled]" type="hidden" value="0">
<input id="enabled" class="switch-input" type="checkbox" value="1" name="auto_campaign[enabled]"
v-model="isEnabled" @change="toggleEnable" />
<label class="switch-paddle enable-button" for="enabled"></label>
</span>
</div>
</div>