Vue.js modal component example not closing

Question

I'm trying to use Modal Component Example from Vue.js website examples in my project. When I use the modal component in my-project component, it works fine, but when I add a close button in the header slot, this button doesn't work, it doesn't close the modal while the default button in the footer still works fine.

The modal component :

<template>
    <transition name="modal">
        <div class="modal-mask">
        <div class="modal-wrapper">
            <div class="modal-container">

            <div class="modal-header">
                <slot name="header">
                default header
                </slot>
            </div>

            <div class="modal-body">
                <slot name="body">
                default body
                </slot>
            </div>

            <div class="modal-footer">
                <slot name="footer">
                default footer
                <button class="modal-default-button" @click="$emit('close')">
                    OK
                </button>
                </slot>
            </div>
            </div>
        </div>
        </div>
    </transition>
</template>

<script>
export default {
    props: {
        showMal: Boolean
    }
}
</script>

<style scoped>
    <!-- same as vuejs website modal component example -->
</style>

How I'm calling it :

<template>
    <button id="show-modal" @click="showModal = true">Show Modal</button>
    <!-- use the modal component, pass in the prop -->
    <modal v-if="showModal" @close="showModal = false">
        <!--
        you can use custom content here to overwrite
        default content
        -->
        <div slot="header">
            <button class="modal-default-button" @click="$emit('close')">Close</button>
        </div>
    </modal>
</template>

<script>
export default {
    data () {
        return {
            showModal: false
        }
    }
</script>

What's wrong in my implementation of this code ?

Answer 1

Since this is at the parent:

<template>
    <button id="show-modal" @click="showModal = true">Show Modal</button>
    <!-- use the modal component, pass in the prop -->
    <modal v-if="showModal" @close="showModal = false">
        <!--
        you can use custom content here to overwrite
        default content
        -->
        <div slot="header">
            <button class="modal-default-button" @click="$emit('close')">Close</button>
        </div>
    </modal>
</template>

This code:

<button class="modal-default-button" @click="$emit('close')">Close</button>

Actually makes the parent emit the 'close', not the modal child.

So, since the property that controls the modal is showModal, just set it to false instead:

<button class="modal-default-button" @click="showModal = false">Close</button>

Demo JSFiddle: https://jsfiddle.net/acdcjunior/mwLbw11k/4208/