Как предотвратить изменение формы выбора до завершения диалога в 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

Я бы создал новый компонент, который сочетал бы элемент выбора и диалоговое окно подтверждения, и чтобы он выдавал событие '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>