在选择 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

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

然后，您将拥有另一个数据属性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>

Answer 2

我已经使用甜蜜警报来复制您的情况，只需将其更改为您的模型即可。

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

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

如果用户取消：serviceTypeSelectedv 模型设置为新的 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>

如果对甜蜜警报感兴趣，因为我将其用于这个特定问题。

Vue-SweetAlert2 npm

npm i vue-sweetalert2

---

Sweet Alert有一个很好的文档，非常适合与vue.js一起使用。