Issue: My current project involves creating a versatile table component that can be utilized by other components to display tabular data. Each cell in this table could contain one of three possible values:
- Text
- HTML
- Component
While I have successfully implemented the rendering of these values, I am facing difficulty in binding an event listener. What I aim to achieve is the ability to pass a method and event to the component, which should then bind them to the respective cell.
For instance:
TABLE JSON
{
"cell-1":{
"type":"html",
"data":"<h4>text-1</h4>",
"method": someMethod
}
}
TABLE COMPONENT
<tbody>
<template>
<tr>
<td >
<span
v-if="type == 'html'"
v-html="data"
v-on:click.native="$emit(someMethod)"
v-on:click.native="someMethod"
></span>
</td>
</tr>
</template>
</tbody>
The above code snippet showcases my current approach where the table dynamically renders cells based on the object passed as input.
I have already explored solutions provided on Stack Overflow such as:
- SO Solution 1
- SO Solution 2
If you require additional information or have suggestions, please feel free to share them with me.