在 window.confirm() 之前更改属性

Question

下面是我的代码：

<a
  @click="destroy"
  :class="['button', { 'is-loading': deleting }]"
>
  Delete
</a>

data: () => ({
  deleting: false
}),
destroy () {
  this.deleting = true

  if (!confirm('Sure?') {
    this.deleting = false
    return
  }
}

结果显示一个模态对话框和this.deleting is not true：/

是否可以在对话框之前更改删除属性？

Answer 1

在确认对话框出现时，用户界面似乎尚未更新。您可以使用 setTimeout(func, 0) 稍微延迟确认对话框，以确保 UI 已更新。

它应该类似于：

destroy () {
  this.deleting = true

  // Store reference to `this` for access during callback.
  var self = this;

  setTimeout(function() {
      if (!confirm('Sure?') {
        // self - refers to `this` in the outer context.
        self.deleting = false
        return
      }
  }, 0);
}

或

destroy () {
  this.deleting = true

  setTimeout(() => {
      if (!confirm('Sure?') {
        this.deleting = false
        return
      }
  }, 0);
}

requestAnimationFrame 也可能是一个不错的选择。

见：How to tell when a dynamically created element has rendered

注意：我没有对此进行测试，因为您的问题中没有 MCVE。

Answer 2

当时confirm 被调用并且模态显示this.deleting 是true。但是如果你期望 vue 组件做一些不同的渲染，因为你改变了this.deleting，那么这不会发生，因为确认是阻塞的。

我建议将confirm、alert、prompt 的本机对话框处理包装到自己的函数中。这不仅允许它们被异步打开/触发，而且还可以在以后用自定义对话框替换它们。

使用 await/async 和 Promises 有一个很好的方法来做到这一点：

你的对话模块

const dlgs = {}

dlgs.confirm = function (message) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(confirm(message))
    },0)
  })
}

你的 vue 组件

<a
  @click="destroy"
  :class="['button', { 'is-loading': deleting }]"
>
  Delete
</a>


data: () => ({
  deleting: false
}),
async destroy () {
  this.deleting = true

  if (! await dlgs.confirm('Sure?') {
    this.deleting = false
    return
  }

  // do the deleting
}

拥有使用 html 实现的自定义对话框，其优点是您可以在打开对话框时在后台更新信息。