ag-grid-vue: как определить щелчок по строке?

Question

Я следую примеру здесь.

Все работает, и теперь я хочу обнаружить щелчок по строке и получить данные о событии.

Вот мой App.vue:

<template>
  <ag-grid-vue style="width: 500px; height: 500px;"
           class="ag-theme-alpine"
           :columnDefs="columnDefs"
           :rowData="rowData"
           :rowClicked="onRowClicked"
  >
  </ag-grid-vue>
</template>

<script>
import {AgGridVue} from "ag-grid-vue";

export default {
  name: 'App',
  data() {
    return {
      columnDefs: null,
      rowData: null
    }
  },
  components: {
    AgGridVue
  },
  methods:{
    onRowClicked(params) {
      console.log(params);
      console.log(params.node.data);
    }
  },
  beforeMount() {
    this.columnDefs = [
      {headerName: 'Make', field: 'make', sortable: true, filter: true },
      {headerName: 'Model', field: 'model', sortable: true, filter: true },
      {headerName: 'Price', field: 'price', sortable: true, filter: true }
    ];

    fetch('https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/sample-data/smallRowData.json')
        .then(result => result.json())
        .then(rowData => this.rowData = rowData);
  }
}
</script>

<style>
@import "../node_modules/ag-grid-community/dist/styles/ag-grid.css";
@import "../node_modules/ag-grid-community/dist/styles/ag-theme-alpine.css";
</style>

Однако метод onRowClicked не вызывается, когда я нажимаю на строку.

Что мне здесь не хватает?

Answer 1

Заменить эту строку

:rowClicked="onRowClicked"

с участием

@rowClicked="onRowClicked"

Чтобы сделать ag-grid-vue Компонент генерирует событие при выборе строки.

Живая демонстрация