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

Question

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

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

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函数中相应地更改选项？或者我应该使用某种完全不同的方法？谢谢你。

Answer 1

我将创建一个新组件，它结合了选择元素和确认对话框，并让它发出一个“输入”事件（仅当新选择被确认时）并接收一个“值”道具，这样父级就可以将它与 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/vue@2.6.8/dist/vue.min.js"></script>
<div id="app">
  <select-confirm v-model="confirmedValue"></select-confirm>
  <p>Confirmed value is '{{ confirmedValue }}'.</p>
</div>