euvl/vue-js-toggle-button

Sync doesn't work as expected, value/v-model can get out of sync

Opened this issue · 5 comments

If I have the toggle in sync mode connected to a value using v-model (or :value and @input) the toggle can get out of sync of the value.

When sync is selected the toggle function could not set this.toggled = !this.toggled directly, but could just send the value through the input event and let the parent's v-model handler set the value.or quickly changes.

Maybe something like...

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

Is there any way to get around this issue in the current version?

@Stanleyck Try to remove v-model and leave only value and set sync = true. Then, there is exist change event that you can use to change the field of your model avoiding v-model

Just saw @aldencolerain 's comment right now - made a PR - happy to add you to it :)

is there any update on this?