如何防止选择表单在 Vue 中的对话框完成之前被更改 [英] How to prevent a select form from being changed until dialog completion in Vue

问题描述

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

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

//这有效，但我需要能够在不使用确认"的情况下做到这一点handlePotentialOptionChange(e){if (this.currentOption !== e.target.value){if (!confirm(`您确定要将选项从 ${this.currentOption} 更改为 ${e.target.value}?您将需要重做多个字段.`)){this.selectModel = this.currentOption//如果用户取消更改，则将其恢复为原始选项.}}}

由于我无法使用 confirm，我使用了 Buefy 的 对话框组件.但是，它是异步运行的，这意味着当用户尝试选择不同的选项时，选项更改将在他们回答对话框之前完成.如果取消，下面的代码将恢复更改，但到那时已经太晚了，没有任何用处.

handlePotentialOptionChange(e){if (this.currentOption !== e.target.value){this.$dialog.confirm({消息:`您确定要将选项从 ${this.currentOption} 更改为 ${e.target.value} 吗?您将需要重做多个字段.`,onConfirm: () =>this.selectModel = e.target.value,onCancel: () =>this.selectModel = this.currentOption})}}

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

解决方案

我将创建一个新组件，将选择元素和确认对话框结合起来，并让它发出 'input' 事件(仅当新选择被确认时) 并接收一个值"道具，以便父级可以将它与 v-model 一起使用.

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

Vue.component('select-confirm', {道具:['价值']，数据:函数(){返回 {showConfirmationDialog: false,未确认值:'a'}},方法: {取消选择(){this.showConfirmationDialog = false},确认选择(){this.$emit('input', this.unconfirmedValue)this.showConfirmationDialog = false},显示确认 (e) {this.unconfirmedValue = e.currentTarget.valuethis.showConfirmationDialog = true}},模板:`<div class="select-confirm"><select :value="value" @change="showConfirmation"><option value="a">A</option><option value="b">B</option></选择><div v-if="showConfirmationDialog" class="confirmation-dialog"><p>您确定要将您的选择更改为{{ this.unconfirmedValue }}"吗?</p><button @click="confirmSelection">是</button><button @click="cancelSelection">否</button>

`})新的 Vue({el: '#app',数据 () {返回 {确认值:'a'}}})

<script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></脚本><div id="应用程序"><select-confirm v-model="confirmedValue"></select-confirm><p>确认值是'{{confirmedValue }}'.</p>

I have a select field with various options. When the user clicks the field to change the current selection, I need to launch a prompt to have the user confirm that they wish to continue with the change, since that will require them to redo a long process. If they cancel the change, it needs to prevent the selected option from ever changing as even a quick temporary change will trigger an autosave on the client. Because of this, it seems that other solutions don't work as they save the original value, let the change go through, and then revert the change if necessary.

I'm not sure if this is the "proper" approach, but I decided to create a function that will run each time the select field is clicked. I successfully solved this issue by using the native confirm method in the following code. I believe it works because confirm's synchronous nature allows me to revert the change before it is ever received by any event listeners, so it's basically like the change never happened(please correct me if I'm wrong). Unfortunately, I am not allowed to use confirm due to compatibility reasons.

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

Since I cannot use confirm, I'm using a dialog component from Buefy. However, it runs asynchronously which means that when the user attempts to select a different option, the option change will go through before they even answer the dialog. The code below will revert the change if canceled, but by that point it is too late to be of any use.

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

Is it possible to let the user see the option dropdown, but disable any kind of option changes until the prompt is answered, so that I can change the option accordingly inside the async onConfirm and onCancel functions? Or should I be using some sort of entirely different approach? Thank you.

解决方案

I would create a new component that combines the select element and the confirmation dialog and have it emit an 'input' event (only when the new selection has been confirmed) and receive a 'value' prop so the parent can use it with v-model.

Run the code snippet and read through the example below.

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 中的对话框完成之前被更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！