Question

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

我不确定这是否是“正确”的方法，但是我决定创建一个函数，该函数将在每次单击选择字段时运行。我通过以下代码中的本机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，因此我正在使用dialog component from 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

我将创建一个将select元素和确认对话框结合在一起的新组件，并使其发出“ input”事件（仅当确认新选择时）并接收“ value”道具，以便父母可以使用它使用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>

如何防止选择表单更改直到Vue中的对话框完成

1 个答案: