Show modal before change option in select BOOTSTRAP-VUEJS

Question

I want to show a modal for confirm the action when you change the selected value in a b-form-selected. I can't to stop the event and it always changes the value before the modal shows. Is there an option for this?

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

Answer 1

Here's how i would suggest doing it. You have one data property selectedOption which you bind to your b-select, this option will be what is shown in the select.

You then have another data property actualOption which is the final value. So when you change your b-select value, you open the dialog to confirm. If the user confirms, you set actualOption to the new selected value. If the user declines you set this.selectedOption back to the old value, which is the value of 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/[email protected]/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/[email protected]/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>