JavaScript: this. $ Emit ('closeRequest') не создает никаких событий в инструменте vue dev

Question

Я следую учебному пособию, и они делают проект. все идеально и у меня все хорошо. но я сталкиваюсь с ошибкой. У меня есть компонент (Home.vue) и внутри компонента есть кнопка. если пользователь нажмет на кнопку, откроется модальное окно (с использованием BULMA scss framework и js отсутствует). при нажатии кнопки появляется другой компонент (Add.vue), в котором записан фактический модальный код. Я передаю свойство Home.vue в Add.vue через <Add></Add> Компонент. это значение свойства говорит модал будет активным или нет.

вот дом.вю

<template>
<div>
<nav class="panel column is-offset-2 is-8">
    <p class="panel-heading">
        VueJs Phonebook
        <button class="button is-link is-outlined" @click="openAdd">
            Add New
        </button>
    </p>

</nav>

<Add :openmodal='addActive'></Add>

</div>
</template>

<script>
let Add = require('./Add.vue')
export default {
    components:{Add},
    data(){
        return{
            addActive:''
        }
    },

    methods:{
        openAdd(){
            this.addActive = 'is-active';
        }
    }
}
</script>

Я успешно получаю свойство в Add.vue, но на модальной стороне есть кнопка «закрыть» и «закрыть». Я использую, чтобы написать метод под названием close. если кнопка нажата, this.$emit('closeRequest'); должен создать событие в инструменте vue dev. но оно не создает никакого события, если была нажата кнопка отмены или закрытия.

это файл Add.vue

<template>
 <div class="modal" :class="openmodal">
    <div class="modal-background"></div>
    <div class="modal-card">
        <header class="modal-card-head">
        <p class="modal-card-title">Modal title</p>
         <button class="delete" aria-label="close" @click='close'> 
</button>
        </header>
        <section class="modal-card-body">
        <!-- Content ... -->
        </section>
        <footer class="modal-card-foot">
        <button class="button is-success">Save changes</button>
        <button class="button" @click='close'>Cancel</button>
        </footer>
    </div>
</div>
</template>
<script>
export default{
    props:['openmodal'],
    methods:{
        close(){
            this.$emit('closeRequest');
        },
    }
}
</script>

Answer 1

    <template>
<div>
<nav class="panel column is-offset-2 is-8">
    <p class="panel-heading">
        VueJs Phonebook
        <button class="button is-link is-outlined" @click="openAdd">
            Add New
        </button>
    </p>

</nav>

<Add :openmodal='addActive' @closeRequest='closeAdd'></Add>

</div>
</template>

<script>
let Add = require('./Add.vue')
export default {
    components:{Add},
    data(){
        return{
            addActive:''
        }
    },

    methods:{
        openAdd(){
            this.addActive = 'is-active';
        },
        closeAdd(){
            this.addActive = '';
        }
    }
}
</script>