How to hide all popovers on document click - except the one clicked

Posted 4 months ago by MartinZeltin

I have a Calendar component with days. When you click on a day, it shows it's popover. I am trying to make it so that if you click anywhere in the document it hides all popovers. But it should not hide the one that I just opened.

I added an event listener for document click but it fires after the Day component's @click event. Which means it shows the current day's popover and then immediately hides all popovers. But it should first hide all popovers and only then show the Day's popover.


<div id="app">

My Day component

export default {

    template: `
        <div @click="isVisiblePopover = !isVisiblePopover">
            <popover v-show="isVisiblePopover" />

    components: {

    data() {
        return {
            isVisiblePopover: false

    mounted() {
        $(document).click(event => {

        EventBus.$on('popover-opened', () => {
            this.isVisiblePopover = false

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.