在选择 BOOTSTRAP-VUEJS 中的更改选项之前显示模式

Question

当您更改 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
          })
}

Answer 1

我建议这样做。 您有一个数据属性 selectedOption 绑定到您的 b-select，此选项将显示在选择中。

然后您有另一个数据属性actualOption，它是 final 值。因此，当您更改 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>

Answer 2

我已使用 Sweet Alerts 来复制您的情况，效果相同，只需将其更改为您的模型即可。

在您的数据对象中创建一个附加值，您将使用它来检查您的模型输入。

在@change 函数中，检查用户是否同意更改数据或取消更改。

如果用户取消：将 serviceTypeSelected v-model 设置为新的 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 一起使用。