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

删除
数据：（）=>({
删除：false
}),
销毁（）{
this.deleting=true
如果（！确认（'确定？'））{
this.deleting=false
返回
}
}

因此，将显示一个模式对话框，并且

this.deleting不正确

：/

---

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

在确认对话框出现之前，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);
}

或

requestAnimationFrame

也可能是一个不错的选择

见：

---

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

在确认对话框出现时，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);
}

或

requestAnimationFrame

也可能是一个不错的选择

见：

---

注意：我没有测试过这个问题，因为问题中没有MCVE。

在调用

确认

时，模式是show

this。删除

是

真的

。但是如果您希望vue组件执行一些不同的渲染，导致您更改了

这个。删除

则不会不会发生，因为确认正在阻塞

我建议将

确认

、

警报

、

提示

的本机对话框处理打包到自己的函数中。这不仅允许它们异步打开/触发，而且允许以后用自定义对话框替换它们

使用

await

/

async

并承诺有一个很好的方法来实现这一点：

您可以使用对话框模块

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
}

删除
数据：（）=>({
删除：false
}),
异步销毁（）{
this.deleting=true
如果（！等待dlgs.confirm（'确定？'））{
this.deleting=false
返回
}
//执行删除操作
}

---

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

在调用

确认

时，模式为show

this。删除

为

真

。但是如果您希望vue组件执行一些不同的渲染ng因为您更改了

此项。删除
则不会发生此情况，因为确认正在阻止

我建议将
确认
、
警报
、
提示
的本机对话框处理打包到自己的函数中。这不仅允许它们异步打开/触发，而且允许以后用自定义对话框替换它们

使用
await
/
async
并承诺有一个很好的方法来实现这一点：

您可以使用对话框模块

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
}


删除
数据：（）=>({
删除：false
}),
异步销毁（）{
this.deleting=true
如果（！等待dlgs.confirm（'确定？'））{
this.deleting=false
返回
}
//执行删除操作
}

拥有使用html实现的自定义对话框的优点是，当对话框打开时，您可以在后台更新信息。
您能做一个修改吗？这是什么意思？删除不是真的
。在调用
确认
时，模式是show
this。删除
是真的。但是我如果您希望vue组件执行一些不同的渲染，则会导致您更改此
。删除
，则不会发生此情况，因为
确认
正在阻塞。您可以进行更改吗？这是什么意思？删除不是真的
。此时调用
确认
，模式为show
this。删除
>是真的。但是如果您希望vue组件执行一些不同的渲染，导致您更改了
此项。删除
则不会发生这种情况，因为
确认
正在阻塞。解释很可能是正确的，但是超时回调中的
此
现在引用了错误的元素。@t.niese Good catch！谢谢。I将更新答案。顺便说一句，你可以写setTimeout（（）=>{this…}@nrkz是的，在这种情况下，这将是一个更好的选择。解释很可能是正确的，但是超时回调中的
this
现在引用了错误的元素。@t.niese很好！谢谢。我将更新答案。顺便说一句，你可以写setTimeout（）=>{this…}@nrkz是的，在这种情况下，这将是一个更好的选择。谢谢你的回答。对我来说，这类事情的设计过度；）毕竟，我不会使用确认方法。谢谢你的回答。对我来说，这类事情的设计过度；）毕竟，我不会使用确认方法