Vue.js 选择BOOTSTRAP-VUEJS中的“更改前显示模式”选项

我想显示一个模式，用于在更改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
          })
}

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

在数据对象中创建一个附加值，用于对照模型输入进行检查

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

如果用户取消：将serviceTypeSelected v-model设置为新的inputVal值以撤消更改

如果用户接受：运行确认对话框并将inputVal设置为输入值，这将保存您的历史记录

资料{ 返回{ serviceTypeSelected:， 输入值：， } }, 方法：{ changeServiceTypeid{ 这是斯瓦尔{ 标题：你确定吗？， text：您要更改服务类型！， 类型：警告， showCancelButton:true， confirmButtonColor:f2ab59， confirmButtonText:是，更改服务类型！， 取消按钮文字：不，取消！， }.然后确认=>{ 如果确认，则返回值{ 这是斯瓦尔 ‘变了！’， “服务类型已更改。”， “成功” ; this.inputVal=id； }否则{ 此.$swalCancelled，服务类型未更改！错误； this.serviceTypeSelected=this.inputVal； //this.serviceTypeSelected=； //this.inputVal=； } }; } } 测试1 测试2

---

下面是我的建议。 您有一个数据属性Selected选项，该选项绑定到b-select，该选项将显示在select中

然后有另一个数据属性actualOption，它是最终值。因此，当您更改b-select值时，将打开对话框进行确认。如果用户确认，则将actualOption设置为新的选定值。如果用户拒绝，请将此.selectedOption设置回旧值，即actualOption的值

window.onload==>{ 新Vue{ el:“应用程序”， 资料{ 返回{ 已选择选项：0， 实际情况：0， 选项：[ {值：0，标签：'橙色'}， {value:1，标签：'Apple'}， {值：2，标签：'香蕉'}， {值：3，标签：'草莓'}， {值：4，标签：'Mango'} ] } }, 方法：{ onOptionChangedvalue{ 此.bvModal.msgBoxConfirm'请确认您要删除所有内容。' .然后确认=>{ 如果证实{ 这个。实际操作=数值； }否则{ this.selectedOption=this.actualOption； } }. 捕获=>{ /*如果出现错误，请重置该值*/ this.selectedOption=this.actualOption； } } } } } {{option.label}

---

反对者也可以评论为什么这被否决。你建议实施一个全新的组件，它不能解决他当前的问题。对他的问题实际有用的信息放在你答案的底部。