Here is the child ponent:

Vueponent("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");
        }
    }
});

Here is the 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>

I can see in the Vue Developer Tools in Chrome that the event is being emitted but for some reason, the parent is not hearing it and the doneEditing function is never called. Am I missing something obvious here?

Here is the child ponent:

Vue.ponent("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");
        }
    }
});

Here is the 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>

I can see in the Vue Developer Tools in Chrome that the event is being emitted but for some reason, the parent is not hearing it and the doneEditing function is never called. Am I missing something obvious here?

• javascript
• vue.js
• vue-ponent

• @Bert The parent doesn't have a template but the child does, so I added that to the OP. Hopefully that helps? – Dev 404 Commented Dec 5, 2017 at 18:08
• It does. What are you attempting to watch? Watch should be an object. Beyond that, the main issue here appears to be that you never set up a listener for the doneEditing event. – Bert Commented Dec 5, 2017 at 18:09
• @Bert Whoops, I've corrected the watch part, that was just a typo when posting here. How do I go about listening for the event? I thought the parent was always listening but I am still relatively new to Vue so I could be easily wrong. – Dev 404 Commented Dec 5, 2017 at 18:13

1 Answer 1

First, I remend you change the name of the event to done-editing.

this.$emit("done-editing")

This is because attributes in HTML are case insensitive and if you are rendering some of your template to the DOM, it's just better all around to avoid camelCased names. Note that this doesn't apply if you define the templates in strings or if you are using single file ponents.

Then you need to listen for it on the ponent.

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

When you emit an event from a ponent, the parent has to explicitly listen for the event.