Upon clicking the button labeled Launch centered modal, I anticipate that the modal will hide the buttons x,cancel, and ok due to the boolean value of showButton being set to false.
Subsequently, if I click on the show button, the buttons within the modal should appear since the value of showButton has been updated to true. How can this functionality be implemented?
https://i.sstatic.net/QzFgq.png
App.vue
<template>
<div id="app">
<b-button v-b-modal.modal-center>Launch centered modal</b-button>
<b-modal id="modal-center" centered title="BootstrapVue">
<p class="my-4">Vertically centered modal!</p>
<button @click="setShowButton">Show Button</button>
</b-modal>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
showButton: false,
};
},
methods: {
setShowButton() {
this.showButton = true;
},
},
};
</script>
<style>
#app {
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>Codesandbox
https://codesandbox.io/s/flamboyant-herschel-62wpt?file=/src/App.vue:0-587