CODEWITHSUNDEEP
typescriptvue.jsvuejs2vue-component
Rustam Salakhutdinov
Rustam Salakhutdinov

Reputation: 804

Vue event was emitted, but wasn't received

I have a Typescript + Vue app of one parent object and one component (pager):

//pager.ts
@Component({
    name: "pager",
    template: require("text!./pager.html")
})
export default class Pager extends Vue {
    onClick(pageIndex: number) : void{
        this.$emit("pageClick", pageIndex);
    }
}

<!-- pager.html -->
<div id="pager" class="text-center" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <a v-on:click="onClick(1)">
        1
    </a>
</div>

The parent vue and html file:

// main.ts
this.vue = new Vue( {
    el: "#log-container",
    components:{
        pager: Pager
    },
    methods: {
        loadFromServer(pageIndex: number) : void
        {
            // do thing
        }
    },
    created(){
        // it workes
        this.loadFromServer(1);
    }
});

<!-- main.html -->
<div id="log-container">
    <pager v-on:page-click="loadFromServer">
    </pager>
</div>

So the problem is I see that the event was emitted successfully, but it wasn't received by the main Vue object and the loadFromServer method wasn't called.

Also:

Despite all of that the loadFromServer is not called.

Upvotes: 1

Views: 1397

Answers (1)

Rustam Salakhutdinov
Rustam Salakhutdinov

Reputation: 804

Thanks to @Bert the right answer is to use kebab-case in time of event emitting.

Upvotes: 1

Related Questions