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

这是我的代码如下：

<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：/

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

最佳答案

似乎在确认对话框出现时，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。