Prevent change

[galeanofabian]

trafficstars

Hi, how can I prevent change in toggle, example, I'm receiving data from database, and when I click in toggle-button I want to execute a method which changes value in database, but I can cancel that operation, problem is when I click on button it changes automatically even canceling operation, what I want is that the button wait if response is true or flase to change. Many thanks

[veebuv]

toggle(event) {
      if (!this.sync) {
        this.toggled = !this.toggled;
      }
      this.$emit('input', !this.toggled);
      this.$emit('change', {
        value: !this.toggled,
        srcEvent: event,
      });
    }

I forked and made a quick fix like this, yes you end up getting a delay in movement on the toggle - but I can add a tiny loader, which is enh.

Basically states that if the sync is true, listen to the prop value and don't listen to local click events - which is how it should be

[GussRw]

You can do those with @click.native

<toggle-button @click.native="yourFunction"/>

and inside your function call preventDefault() like this

yourFunction(event){
    event.preventDefault();
    //TODO
}

[benlind]

Even simpler:

<toggle-button @click.native.prevent="toggle" />

That also prevents an issue I was seeing where the toggle function was being called twice for a single click.