JS 确认方法在 vue 2 中切换 vuetify 复选框

Question

这次尝试让事情变得非常忙碌。我只有一个 v-dialog，里面是一个复选框。当您单击该复选框时，我们会运行一个 confirm() 方法来打开以浏览器为中心的对话框，以确认您要单击该复选框。

当我点击okay时，确认它。复选框不会改变，但 override 的值会改变。当我再次击中它时，它当然会再次翻转覆盖，现在它向后翻转。

当我点击取消时，取消确实阻止了任何更改的发生。

我在这里迷路了，一直在这里挖掘一些类似的例子，这就是我想出 click.native 概念的地方。

在我拥有 click.native.capture 之前，它甚至不会尝试阻止它。我认为答案就在那个停止请求的某个地方。

<v-checkbox
  ref="checkbox"
  dense
  :value="override"
  @click.native.capture="showConfirmationDialog($event)"
  class="pa-0 pl-5 ma-0 mt-3"
  label="Manually apply sale Price. WARNING: Will turn off auto updates."
></v-checkbox>

和方法：

showConfirmationDialog(event) {
  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 {
      event.preventDefault();
      event.stopPropagation();
    }
  } else {
    this.override = false;
  }
}

Answer 1

您可以使用

v-model

，然后如果结果为 false，则在下一次 UI 更新时使用 nextTick 立即将值设置回 false。这样你就不会与 Vuetify 作斗争，你只需等待 v-checkbox 完成它的事情，然后将值翻转为正确的。它应该看起来是无缝的。这也可以只使用标准

@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;
  }
}