javascript - 在 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

在出现确认对话框时，UI 似乎尚未更新。您可以使用 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。