Javascript 如何防止在Vue中的对话框完成之前更改选择窗体

我有一个带有各种选项的选择字段。当用户单击该字段以更改当前选择时，我需要启动一个提示，让用户确认他们希望继续更改，因为这将需要他们重做一个较长的过程。如果他们取消更改，则需要防止所选选项不断更改，因为即使是快速的临时更改也会触发客户端上的自动保存。因此，在保存原始值时似乎不起作用，让更改通过，然后在必要时恢复更改

我不确定这是否是正确的方法，但我决定创建一个函数，该函数将在每次单击select字段时运行。我在下面的代码中使用本机confirm方法成功地解决了这个问题。我相信它是有效的，因为confirm的同步特性允许我在任何事件侦听器接收到更改之前还原更改，因此基本上就像更改从未发生过一样请纠正我的错误。不幸的是，由于兼容性原因，我不允许使用confirm

// This works, but I need to be able to do it without using 'confirm'
handlePotentialOptionChange(e){
  if (this.currentOption !== e.target.value){
    if (!confirm(`Are you sure you want to change the option from ${this.currentOption} to ${e.target.value}? You will be required to redo multiple fields.`)){
      this.selectModel = this.currentOption // If user cancels the change, revert it to the original option. 
    }
  }
}

因为我不能使用confirm，所以我使用了。但是，它是异步运行的，这意味着当用户尝试选择不同的选项时，选项更改将在用户应答对话框之前完成。如果取消，下面的代码将恢复更改，但到那时已经太晚了，没有任何用处

handlePotentialOptionChange(e){
  if (this.currentOption !== e.target.value){
    this.$dialog.confirm({
      message: `Are you sure you want to change the option from ${this.currentOption} to ${e.target.value}? You will be required to redo multiple fields.`,
      onConfirm: () => this.selectModel = e.target.value,
      onCancel: () => this.selectModel = this.currentOption
    })
  }
}

---

是否可以让用户看到选项下拉列表，但在提示得到响应之前禁用任何类型的选项更改，以便我可以在异步onConfirm和onCancel函数中相应地更改选项？或者我应该使用某种完全不同的方法？谢谢。

我将创建一个新组件，该组件将选择元素和确认对话框结合起来，并使其仅在确认新选择并接收“值”道具时发出“输入”事件，以便家长可以将其与v-model一起使用

运行代码片段并通读下面的示例

Vue.组件“选择-确认”{ 道具：['value']， 数据：函数{ 返回{ showConfirmationDialog:false， 未确认值：“a” } }, 方法：{ 取消选择{ this.showConfirmationDialog=false }, 确认选择{ this.$emit'input'，this.unconfirmedValue this.showConfirmationDialog=false }, showE{ this.unconfirmedValue=e.currentTarget.value this.showConfirmationDialog=true } }, 模板：` A. B 是否确实要将选择更改为“{this.unconfirmedValue}}”

对 不 ` } 新Vue{ el:“应用程序”， 资料{ 返回{ 确认值：“a” } } } 确认值为“{confirmedValue}}”

---

谢谢，这对我帮助很大！