[Vuejs]-JS confirm method to toggle vuetify checkbox in vue 2

by

0👍

✅

You could use v-model and then immediately set the value back to false on the next UI update tick using nextTick if the result is false. This way you’re not fighting Vuetify, you just wait for v-checkbox to finish it’s thing then flip the value to be correct. It should appear seamless. It’s also ok with this to just use standard @click

<template>
  <div>
    <v-checkbox
      ref="checkbox"
      dense
      v-model="override"
      @click="showConfirmationDialog"
      class="pa-0 pl-5 ma-0 mt-3"
      label="Manually apply sale Price. WARNING: Will turn off auto updates."
    ></v-checkbox>
  </div>
</template>

showConfirmationDialog() {
  if (this.override) {
    const result = confirm(
      'The action you are requesting will remove this product from automatic payment adjustments and information. You will need to re-apply the item in order to turn this back on. Are you sure you wish to continue?'
    );

    if (result) {
      this.override = true;
    } else {
      this.$nextTick(() => {
        this.override = false;
      });
    }
  } else {
    this.override = false;
  }
}

Leave a comment