Call function if switch gets toggled in VueJS/VuetifyJS
Found another better solution to use @change prop, Which calls the method every time the switch is toggled.
<v-switch :input-value="true" @change="changeState(item.id)" ></v-switch> <v-switch :input-value="true" @change="changeState(item.id)" ></v-switch>Here's script,
methods:{ changeState(id) { console.log("Switch "+id); // Do stuff }}
You can set up a watcher on switch1 data property as follows:
<script> export default { data () { return { switch1: false } }, watch: { switch1(newValue){ //called whenever switch1 changes console.log(newValue); } } }</script>Since the v-model of v-switch is bound to switch1 , whenever the switch is toggled on/off the watch handler of switch1 gets called with the changed newValue
Here is a codepen