Показать модальное значение перед изменением в select BOOTSTRAP - VUEJS - PullRequest
Новая
       22

Показать модальное значение перед изменением в select BOOTSTRAP - VUEJS

0 голосов
/ 29 января 2020

Я хочу показать модал для подтверждения действия при изменении выбранного значения в b-form-selected. Я не могу остановить событие, и оно всегда меняет значение до показа мод. Есть ли вариант для этого? 

<b-form-select
    id="serviceType"
    v-model="serviceTypeSelected"
    class="dropdown textfield"
    :data-value="serviceTypeSelected"
    :value="serviceTypeSelected"
    required
    @change="changeServiceType">
    <option
      v-for="option in serviceTypeList"
      :key="option.serviceTypeId"
      :value="option.serviceTypeId">
      {{ option.serviceTypeName }}
    </option>
  </b-form-select>

function changeServiceType () {
     this.$bvModal.msgBoxConfirm('Please confirm that you want to delete everything.', {
          title: 'Please Confirm',
          size: 'sm',
          okTitle: 'YES',
          cancelTitle: 'NO',
          centered: true
        })
          .then(value => {
            if (value) {
              //do things
            } else {
              //nothing
            }
          })
          .catch(err => {
            // An error occurred
          })
}

Ответы [ 2 ]

2 голосов
/ 29 января 2020

Вот как я бы предложил это сделать. У вас есть одно свойство данных selectedOption, которое вы связываете со своим b-select, этот вариант будет тем, что показано в элементе выбора.

У вас тогда будет другое свойство данных actualOption, которое является окончательным значение. Поэтому, когда вы меняете значение b-select, вы открываете диалоговое окно для подтверждения. Если пользователь подтверждает, вы устанавливаете actualOption на новое выбранное значение. Если пользователь отказывается, вы устанавливаете this.selectedOption обратно к старому значению, которое является значением actualOption.

window.onload = () => {
  new Vue({
    el: '#app',
    data() {
      return {
        selectedOption: 0,
        actualOption: 0,
        options: [
          { value: 0, label: 'Orange' },
          { value: 1, label: 'Apple' },
          { value: 2, label: 'Banana' },
          { value: 3, label: 'Strawberry' },
          { value: 4, label: 'Mango' }
        ]
      }
    },
    methods: {
      onOptionChanged(value) {
        this.$bvModal.msgBoxConfirm('Please confirm that you want to delete everything.')
        .then(confirmed => {
          if(confirmed) {
            this.actualOption = value;
          } else {
            this.selectedOption = this.actualOption;
          }
        }).
        catch(() => {
          /* Reset the value in case of an error */
          this.selectedOption = this.actualOption;
        })
      }
    }
  })
}
<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.3.0/dist/bootstrap-vue.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.3.0/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-select
      v-model="selectedOption"
      required
      @change="onOptionChanged">
      <option
        v-for="option in options"
        :key="option.value"
        :value="option.value">
        {{ option.label }}
      </option>
    </b-select>
</div>
1 голос
/ 29 января 2020

Я использовал Sweet Alerts , чтобы воспроизвести вашу ситуацию, работает так же, просто измените ее на вашу модель.

Создайте дополнительное значение в вашем объекте данных, который вы собираетесь использовать проверьте соответствие вашей модели.

В вашей функции @change вы проверяете, согласен ли пользователь изменить данные или отменить изменение.

Если пользователь отменяет : установить serviceTypeSelected v-модель для нового значения inputVal (вашей истории), чтобы отменить изменение.

Если пользователь принимает : запустить диалоговое окно подтверждения и установить для inputVal значение ввода (это сохранить свою историю) 

data() {
  return {
    serviceTypeSelected: '',
    inputVal: '',
  }
},
methods: {
  changeServiceType(id){
    this.$swal({
        title: "Are you sure ?",
        text: "You are going to change the service type!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#f2ab59",
        confirmButtonText: "Yes, change service type!",
        cancelButtonText: "No, cancel!",
    }).then((confirmed) => {
        if (confirmed.value) {
            this.$swal(
                'Changed!',
                'Service type has been changed.',
                'success'
            );
            this.inputVal = id;
        } else {
            this.$swal("Cancelled", "Service type hasn't been changed !", "error");
            this.serviceTypeSelected = this.inputVal;
            // this.serviceTypeSelected = '';
            // this.inputVal = '';
        }
    });
}
}
<b-form-select
    id="serviceType"
    v-model="serviceTypeSelected"
    :data-value="serviceTypeSelected"
    :value="serviceTypeSelected"
    class="dropdown textfield"
    required
    @change="changeServiceType">
    <option>Test1</option>
    <option>Test2</option>
</b-form-select>

Если вы заинтересованы в Sweet Alerts , как я использовал его для этого конкретного вопроса.

vue -sweetalert2 npm

npm i vue -sweetalert2

Sweet Alert имеет хорошую документацию и хорошо подходит для использования с vue. js.
...