I have a showBoxConfirm function that confirms user actions. After clicking the button, it triggers the clickMethod function. The result variable will store the confirmation response, and if it returns false, the function will terminate. However, the showBoxConfirm method is a promise. How can I make sure that the condition works after the response is returned?
<template>
<div>
<button @click="clickMethod()"> Click </>
</div>
</template>
<script>
export default {
methods: {
clickMethod() {
let result = this.showBoxConfirm();
// Ensure the condition works after the response is returned
if (!result) return;
},
showBoxConfirm() {
const h = this.$createElement;
// Using HTML string
const titleVNode = h("div", {domProps: {innerHTML: "Title from <i>HTML<i> string"}});
// More complex structure
const messageVNode = h("div", {class: ["foobar"]}, [
h("b-img", {
props: {
src: "https://picsum.photos/id/20/250/250",
thumbnail: true,
center: true,
},
}),
h("p", {class: ["text-center"]}, [
"Question text?",
]),
]);
// We must pass the generated VNodes as arrays
this.$bvModal
.msgBoxConfirm([messageVNode], {
title: [titleVNode],
size: "sm",
buttonSize: "sm",
okVariant: "danger",
okTitle: "YES",
cancelTitle: "NO",
footerClass: "p-2",
hideHeaderClose: false,
centered: true,
})
.then((value) => {
return value;
})
.catch((err) => {
// Handle any errors that occur
});
},
},
};
</script>