如何防止 Vue 中的对话框完成之前选择表单被更改

我有一个包含各种选项的选择字段。当用户单击该字段来更改当前选择时，我需要启动一个提示，让用户确认他们希望继续更改，因为这将需要他们重做一个漫长的过程。如果他们取消更改，则需要防止所选选项发生更改，因为即使是快速的临时更改也会触发客户端上的自动保存。正因为如此，似乎其他解决方案 https://stackoverflow.com/questions/14019670/how-to-prevent-a-select-from-being-changed不起作用，因为它们保存原始值，让更改通过，然后在必要时恢复更改。

我不确定这是否是“正确的”方法，但我决定创建一个在每次单击选择字段时运行的函数。我通过使用本机成功解决了这个问题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，我正在使用来自 Buefy 的对话框组件 https://buefy.org/documentation/dialog/。但是，它是异步运行的，这意味着当用户尝试选择不同的选项时，选项更改将在他们回答对话框之前完成。如果取消，下面的代码将恢复更改，但到那时已经太晚了，没有任何用处。

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 and onCancel功能？或者我应该使用某种完全不同的方法？谢谢。

我将创建一个新组件，它结合了选择元素和确认对话框，并让它发出“输入”事件（仅当新选择已确认时）并接收“值”道具，以便父级可以将其与 v- 一起使用模型。

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

Vue.component('select-confirm', {
  props: ['value'],

  data: function () {
    return {
      showConfirmationDialog: false,
      unconfirmedValue: 'a'
    }
  },

  methods: {
    cancelSelection () {
      this.showConfirmationDialog = false
    },
    
    confirmSelection () {
      this.$emit('input', this.unconfirmedValue)
      this.showConfirmationDialog = false
    },
    
    showConfirmation (e) {
      this.unconfirmedValue = e.currentTarget.value
      this.showConfirmationDialog = true
    }
  },

  template: `
    <div class="select-confirm">
      <select :value="value" @change="showConfirmation">
        <option value="a">A</option>
        <option value="b">B</option>
      </select>
      <div v-if="showConfirmationDialog" class="confirmation-dialog">
        <p>Are you sure you want to change your selection to '{{ this.unconfirmedValue }}'?</p>
        <button @click="confirmSelection">Yes</button>
        <button @click="cancelSelection">No</button>
      </div>
    </div>
  `
})

new Vue({
  el: '#app',
  data () {
    return {
      confirmedValue: 'a'
    }
  }
})

<script src="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/dist/vue.min.js"></script>
<div id="app">
  <select-confirm v-model="confirmedValue"></select-confirm>
  <p>Confirmed value is '{{ confirmedValue }}'.</p>
</div>