To make good looking Vue apps, we need to style our components.
To make our lives easier, we can use components with styles built-in.
In this article, we’ll look at how to open and close modal components.
The v-b-modal Directive
We can use the v-b-modal to open a modal.
It can take a modifier or an ID string for the modal ID.
For example, we can write:
<template>
<div id="app">
<b-button v-b-modal.modal>open</b-button>
<b-modal id="modal" title="Hello">
<p>Hello!</p>
</b-modal>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We can also write:
<template>
<div id="app">
<b-button v-b-modal="'modal'">open</b-button>
<b-modal id="modal" title="Hello">
<p>Hello!</p>
</b-modal>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We’ve to pass in the string in quotes as the value of v-b-modal .
The button in both examples opens the modal.
Open and Close Modals Programmatically
We can use the this.$bvModal.show() and this.$bvModal.hide() to open and close the modal respectively.
They will be available when we register the BootstrapVue plugin or the ModalPlugin .
For instance, we can write:
<template>
<div id="app">
<b-button @click="$bvModal.show('modal')">Open</b-button>
<b-modal id="modal" hide-footer>
<template v-slot:modal-title>Hello</template>
<div>
<h3>Hello!</h3>
</div>
<b-button block @click="$bvModal.hide('modal')">Close</b-button>
</b-modal>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We have the b-modal component, which is opened with the $bvModal.show method.
We pass in the ID of the modal to open it.
Likewise, we called $bvModal.hide to hide the modal.
We also pass in the ID there.
The show, hide, and toggle Methods
BootstrapVue models can also be opened with the show method.
It can be hidden with the hide method.
And it can be toggled on and off with the toggle method.
For example, we can write:
<template>
<div id="app">
<b-button id="show-btn" @click="showModal">Open</b-button>
<b-button id="toggle-btn" @click="toggleModal">Toggle</b-button>
<b-modal ref="modal" hide-footer title="Hello">
<div>
<h3>Hello</h3>
</div>
<b-button block @click="hideModal">Close</b-button>
<b-button block @click="toggleModal">Toggle</b-button>
</b-modal>
</div>
</template>
<script>
export default {
name: "App",
methods: {
showModal() {
this.$refs["modal"].show();
},
hideModal() {
this.$refs["modal"].hide();
},
toggleModal() {
this.$refs["modal"].toggle("#toggle-btn");
}
}
};
</script>
We have methods that are called the ref of the modal to open and close it.
The ref prop of the b-modal sets the ref name.
Then in the methods, we can use this.$refs to get the modal by its ref name.
Once we accessed the ref, we can call the show , hide , and toggle methods on the ref.
For the toggle method, we have to pass in the selector for the button that lets us toggle the modal.
v-model
b-modal components can bind to a model with the v-model directive.
It’ll bind the visible state of the modal to the state variable.
For example, we can write:
<template>
<div id="app">
<b-button @click="modalShow = !modalShow">Open</b-button>
<b-modal v-model="modalShow">{{modalShow}}</b-modal>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
modalShow: false
};
}
};
</script>
We have the modalShow state, which we bind to the modal state with v-modal .
modalShow will be true if it’s open and false otherwise.
So when we open the modal, the content will be ‘true’.
Scoped Slot Methods
We can emit the bv::show::modal , bv::hide::modal , and bv::toggle::modal on the $root to control the opening and closing of modals.
For example, we can write:
<template>
<div id="app">
<b-button @click="showModal" ref="btnShow">Open</b-button>
<b-button @click="toggleModal" ref="btnToggle">Toggle</b-button>
<b-modal id="modal">
<div class="d-block">Hello</div>
<b-button @click="hideModal">Close</b-button>
<b-button @click="toggleModal">Toggle</b-button>
</b-modal>
</div>
</template>
<script>
export default {
name: "App",
methods: {
showModal() {
this.$root.$emit("bv::show::modal", "modal", "#btnShow");
},
hideModal() {
this.$root.$emit("bv::hide::modal", "modal", "#btnShow");
},
toggleModal() {
this.$root.$emit("bv::toggle::modal", "modal", "#btnToggle");
}
}
};
</script>
We have 2 buttons outside the modal to open and toggle the modal.
We set the ref on each button so that we can use them as the 3rd argument of the $emit method.
This way, we can control the modal’s open status.
The 2nd argument is the ref of the modal.
Once the events are emitted, then we can show, hide, or toggle the modal.
The bv::show::modal event shows the modal when it’s emitted.
The bv::hide::modal event hides the modal when it’s emitted.
And the bv::toggle::modal event toggles the modal when it’s emitted.
Conclusion
We can control how models and opened and close and in various ways, including emitting events, and calling built-in methods.
