Execute functions on button click inside AG-Grid table cells - Vuejs/NuxtJS

Question

I have installed AG-Grid community plugin on my NuxtJs app. Everything is working great but am getting stuck on how to make my buttons on cell-renderer execute the functions defined on methods.

Here is what I have done so far:

index.vue

<template>
   <div>
       <ag-grid-vue style="width: 100%; height: 500px;" class="ag-theme-alpine"
            :columnDefs="columnDefs" @grid-ready="onGridReady" :defaultColDef="defaultColDef"
            :rowData="rowData" :rowHeight="rowHeight">
       </ag-grid-vue>
   </div>
</template>

 <script>
   export default {
     data() {
        return {
          columnDefs: [{
             field: 'scope',
             resizable: true,
             sortable: true,
             headerName: 'Name',
          },
          {
             field: 'scope',
             resizable: true,
             sortable: true,
             headerName: 'Age',
          },
          {
             field: 'scope',
             resizable: true,
             sortable: true,
             headerName: 'Delete',
             cellRenderer(params) {
               return '<button @click="deleteLog(id)" type="button">Delete</button>'
             }
          }]
          ....
        }
      }
   },

   async deleteLog(id) {
    if (confirm("Do you really wish to delete this person?")) {
      const token = localStorage.getItem('token');
      await this.$axios.patch(`/v1/delete/${id}/`, {
        headers: {
          Authorization: `Bearer ${token}`
        },
        deleted: true
      }).then(() => {
        this.$router.app.refresh()
      }).catch(error => {
        this.errors = error.response.data.errors;
      })
    }
  }
 </script>

My table is rendered properly with the button but I can't select or click the button to execute my deleteLog function. Any help to resolve will be greatly appreciated.

Answer 1

I was able to resolve the issue by creating a button cell renderer component and extend it with Vue.extend

components/btn-cell-renderer.vue

<template>
  <span>
    <button @click="btnClickedHandler()"> </button>
  </span>
</template>

<script>
  import Vue from "Vue";
  export default Vue.extend ({
    name: 'BtnCellRenderer',
    mounted() {
    },
    methods: {
     // Write your function here
    },
  });
</script>

Then I imported the component and added few changes on my index.vue

Index.vue

<template>
   <div>
       <ag-grid-vue style="width: 100%; height: 500px;" class="ag-theme-alpine"
            :columnDefs="columnDefs" @grid-ready="onGridReady" :defaultColDef="defaultColDef"
            :rowData="rowData" :rowHeight="rowHeight" :frameworkComponents="frameworkComponents">
       </ag-grid-vue>
   </div>
</template>

<script>

import BtnCellRenderer from "~/components/btn-cell-renderer.vue"

export default{ 
   component : {
     BtnCellRenderer
   },
   
   data() {
    return {
      columnDefs: [{
         field: 'scope',
         resizable: true,
         sortable: true,
         headerName: 'Name',
      },
      {
         field: 'scope',
         resizable: true,
         sortable: true,
         headerName: 'Age',
      },
      {
         field: 'scope',
         resizable: true,
         sortable: true,
         headerName: 'Delete',
         cellRenderer: "btnCellRenderer",
         cellRendererParams: {
          clicked(field) {
            alert(`deleted`);
           }
         },
      
      }]
      ....
    }
  }
 },

....

beforeMount() {
  this.frameworkComponents = {
    btnCellRenderer: BtnCellRenderer,
  };
},

}

</script>