I am currently working on a Vue 3 project where I utilize a component named revogrid to build a dashboard. This particular component requires another component to render a cell as a parameter. My goal is to create an event within the child component that can change the value of the cell by modifying the parent component's datasource. How can I set up this event within the child component using code?
Here is the code snippet for the PARENT COMPONENT:
<template>
<div id="home">
<v-grid theme="material" row-size="48" readonly="true" :source="rows" :columns="aux" />
</div>
</template>
<script>
import VGrid, { VGridVueTemplate } from "@revolist/vue3-datagrid";
import Task from '../components/Task';
export default {
data() {
return {
aux: [],
columns: [
{
name: "Company",
prop: "company",
columnType: "string",
size: 150,
},
{
name: "Advance",
prop: "advance",
size: 150,
cellTemplate: VGridVueTemplate(Task),
},
{
name: "Sefip",
prop: "sefip",
size: 150,
cellTemplate: VGridVueTemplate(Task),
}
],
}
}
}
</script>
In the above code, the Task component is included as a property within the columns array variable. What I aim to do is establish an event inside the Task component that can trigger a method in the parent component.
I attempted to achieve this with the following code:
Task.$emitter.on("update_cell", () => {
alert("I am triggered from the parent");
});
However, this approach did not produce the desired outcome...