Having trouble getting help?
Contact Support
Contact Support
Change switch state using toggle method in Vue Switch component
11 Jun 20241 minute to read
This section explains about how to toggle between the switch states using toggle
method.
<template>
<ejs-switch ref="toggleSwitch" checked=true :created="created"></ejs-switch>
</template>
<script setup>
import { SwitchComponent as EjsSwitch } from "@syncfusion/ej2-vue-buttons";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
const created = (args) => {
this.$refs.toggleSwitch.toggle();
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/fabric.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/fabric.css";
.e-switch-wrapper {
margin: 18px;
}
</style>
<template>
<ejs-switch ref="toggleSwitch" checked=true :created="created"></ejs-switch>
</template>
<script>
import { SwitchComponent } from "@syncfusion/ej2-vue-buttons";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
export default {
name: "App",
components: {
"ejs-switch": SwitchComponent
},
methods: {
created: function (args) {
this.$refs.toggleSwitch.toggle();
}
}
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/fabric.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/fabric.css";
.e-switch-wrapper {
margin: 18px;
}
</style>
Switch triggers
change
event on every state stage to perform custom operations.