Change switch setting from "outside" the switch

[USchroe]

Hi, I really love the rocker switch and I'd like to use the rocker switch to display a boolean variable that can change without any user interaction. So I need the switch to change if a variable in my app changes, and the variable in the app to change when the switch is clicked.
I'm sorry if this is an idiotic question, I'm new to vue.
I tried this:
<rocker-switch v-model="myBoolean" />
When I do that, myBoolean does not change when I click on the switch, but the switch changes when the value of myBoolean changes.
So I tried
<rocker-switch v-model="myBoolean" v-on:change="myBoolean = !myBoolean" />
Then, the web app goes into an endless loop, probably because the myBoolean keeps changing.
And lastly I tried this:
<rocker-switch value="myBoolean" v-on:change="myBoolean = !myBoolean"/>
In this case, the switch does not change when the value of myBoolean changes outside the switch.

Is that a bug or a feature? What do I have to do to make the switch stay in sync with myBoolean?
Thanks for you support!

[hasanbasri1993]

any solution ?

[USchroe]

I downloaded the RockerSwitch.vue source and fiddled with it to make it work. Main changes are:

• use v-model="value" for the input near the top of the file, instead of v-model="isChecked"
• in the watch block, in isChecked(isOn), emit an "input" event, rather than a "change" event

Where I use the switch, I put this code:
<rocker-switch v-model="myBoolean" v-on:input="doSomething()"/>

doSomething() will not change the value of myBoolean, but only react to the change - when the event happens, the myBoolean value is already changed.
I'm not sure if that how it's supposed to be done, but it worked for me.
RockerSwitch.vue.txt