Le parent n'écoute pas l'enfant $emit - VueJS

Question

Voici le composant enfant :

Vue.component("training-edit", {
    template: "#training-edit-template",
    props: ["show"],
    data: function () {
        return {
            form: new Form(),
            isWorking: false
        }
    },
    watch: {
        show: function (val) {
            if (val) {
                $("#editTrainingModal").modal("show");
            } else {
                $("#editTrainingModal").modal("hide");
            }
        }
    },
    methods: {
        onCancel: function () {
            this.$emit("doneEditing");
        }
    }
});

Voici le parent :

new Vue({
    el: "#trainingEditContainer",
    data: {
        isWorking: false,
        showEditTraining: false
    },
    methods: {
        onEdit: function (e) {
            e.preventDefault();
            this.showEditTraining = true;
        },
        doneEditing: function () {
            this.showEditTraining = false; 
        }
    }
});

HTML :

<div id="trainingEditContainer" class="row">
    // unrelated stuff here

    <training-edit v-bind:show="showEditTraining"></training-edit>
</div>
<script id="training-edit-template" type="x-template">
    <modal-right modalId="editTrainingModal">
        <div class="modal-header">
            <button type="button" class="close" v-on:click="onCancel" aria-label="close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Edit Training</h4>
        </div>
        @Html.Partial("Partial/_EditPartial")
    </modal-right>
</script>

Dans les outils de développement de Vue sous Chrome, je peux voir que l'événement est émis mais, pour une raison quelconque, le parent ne l'entend pas et l'icône doneEditing n'est jamais appelée. Est-ce que je rate quelque chose d'évident ici ?

Answer 1

Tout d'abord, je vous recommande de changer le nom de l'événement en done-editing .

this.$emit("done-editing")

En effet, les attributs en HTML ne sont pas sensibles à la casse et si vous rendez une partie de votre modèle dans le DOM, il vaut mieux tout simplement éviter les noms en majuscules . Notez que cela ne s'applique pas si vous définissez les modèles dans des chaînes de caractères ou si vous utilisez des composants à fichier unique.

Alors vous devez l'écouter sur le composant.

<training-edit @done-editing="doneEditing" v-bind:show="showEditTraining">

Lorsque vous émettez un événement à partir d'un composant, le parent doit écouter explicitement l'événement.