I have a Component called "CDataTable" that renders columns in a for loop. Inside the loop, there is a template:
<template v-if="typeof col.template !== 'undefined'" #body="{data}">
<component :is="compile(col.template)" :data="data" :value="getColValue(data, col.field)" />
</template>
In the parent component "LocationList," I can define the column definitions in an array of objects in the data():
columns: [
{field: 'test', header: "test", width: 12, template: `<span v-if="typeof value !== 'undefined'">{{value}} <i class="pi pi-search" @click="console.log(this)"></i></span>`}
]
I managed to get the rendering working as shown above, but now I want to call a function of the ParentComponent "LocationList" in the click handler. Obviously, I have no access to the methods of "LocationList," so I thought I could emit an event and listen to it there. However, if I put "this.$emit" in the click handler, it shows an error that "$emit" is undefined.
So, I added a console.log(this) there to get a clue why. The reason is that "this" refers to the window object.
The question is: How can I call a function of the "LocationList" Component in the click handler?