Я использовал 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.