I recently upgraded from Vue 2 to Vue 3 and encountered an issue with using methods from a parent component in ag-grid buttons within each row. In Vue 2, the syntax was straightforward using this.$parent.$parent due to Ag-Grid. However, in Vue 3, I am struggling to achieve the same functionality and am unsure how to proceed.
Any help would be greatly appreciated.
Below is the code snippet where I am trying to implement this:
<template>
<div class="main">
<i class="fa fa-info icons" @click="infoButton"></i>
<i class="fa fa-file icons" @click="filesHistoryButton"></i>
<i class="fa fa-edit icons" @click="editReminderButton"></i>
</div>
</template>
<script>
import defineComponent from "vue";
import { getCurrentInstance } from "vue";
export default defineComponent({
name: "Actions",
setup(){
const instance = getCurrentInstance();
console.log(instance.parent.parent)
},
data() {
return {};
},
computed: {},
beforeMount() {},
mounted() {},
methods: {
infoButton() {
this.$parent.$parent.GetNotificationHistory(this.params.data.id);
},
filesHistoryButton() {
this.$parent.$parent.GetFilesLists(this.params.data.id);
},
editReminderButton() {
this.$parent.$parent.EditReminder(this.params.data.id);
}
}
});
</script>