[Vuejs]-Row Ids not assigned with vue ag-grid

0👍

I think you didn’t read the ag-drid documentation clearly.

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
  <ag-grid-vue
    style="height: calc(100vh - 148px)"
    class="ag-theme-balham"
    :columnDefs="columnDefs"
    @onGridReady="onGridReady"
    :rowData="rowData"
    :getRowId="getId"
  ></ag-grid-vue>
</template>
<script>
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-alpine.css";
import { AgGridVue } from "ag-grid-vue";

export default {
  name: "App",
  data() {
    return {
      columnDefs: [
        { headerName: "Row ID", valueGetter: "node.id" },
        { field: "make" },
        { field: "model" },
        { field: "price" },
      ],
      gridApi: null,
      columnApi: null,

      rowData: null,
      getRowId: null,
      getId: (params) => {
        return params.data.id;
      },
    };
  },
  components: {
    AgGridVue,
  },
  created() {
    this.rowData = [
      { id: "c1", make: "Lima", model: "Celica", price: 35000 },
      { id: "c2", make: "Ford", model: "Mondeo", price: 32000 },
      { id: "c8", make: "Porsche", model: "Boxster", price: 72000 },
      { id: "c4", make: "BMW", model: "M50", price: 60000 },
      { id: "c14", make: "Aston Martin", model: "DBX", price: 190000 },
    ];
  },
  methods: {
    onGridReady(params) {
      this.gridApi = params.api;
      this.gridColumnApi = params.columnApi;
    },
  },
};
</script>

enter image description here

Leave a comment