My current project consists of a Typescript + Vue application with one parent object and one component, which is the 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 main Vue object along with its corresponding html file are as follows:
// 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>
The issue I am facing is that although the event was emitted successfully, it was not received by the main Vue object and the loadFromServer method was not called.
In addition:
- This method is also called inside
createdand functions properly - If I change
v-on:page-click="loadFromServer"tov-on:page-click="somethingElse", I will receive a Vue error stating that the method somethingElse does not exist. This indicates that Vue is parsing my code correctly.
Despite all these observations, the loadFromServer function remains uncalled.