VueJS ag-grid, невозможно выбрать несколько или одну строку в Laravel - PullRequest
Новая
       16

VueJS ag-grid, невозможно выбрать несколько или одну строку в Laravel

1 голос
/ 12 октября 2019

, поэтому я следовал документации ag-grid и использовал простой вызов API для получения данных, отображаемых в моей настройке Laravel + Vue.

Мой код (такой же, как на их сайте)

Код шаблона 

<template>
  <div style="height: 100%">
   <div class="test-container">
    <div class="test-header">
      Selection:
    <span id="selectedRows"></span>
    </div>
     <ag-grid-vue
       style="width: 100%; height: 100%;"
       class="ag-theme-balham-dark"
       id="myGrid"
       :gridOptions="gridOptions"
       @grid-ready="onGridReady"
       :columnDefs="columnDefs"
       :rowSelection="rowSelection"
       :rowData="rowData"
       @selection-changed="onSelectionChanged"
       ></ag-grid-vue>
   </div>
 </div>
</template>

И мой файл Vue выглядит так: 

import { AgGridVue } from "ag-grid-vue";
export default {
    components: {
    "ag-grid-vue": AgGridVue
    },
    data: function() {
       return {
         gridOptions: null,
         gridApi: null,
         columnApi: null,
         columnDefs: null,
         rowSelection: null,
         rowData: null
        };
         },
    beforeMount() {
        this.gridOptions = {};
        this.columnDefs = [
         {
           headerName: "Title",
           field: "title",
           sortable: true,
           filter: true,
           checkboxSelection: true
         },

        {
        headerName: "Author",
        field: "author",
        sortable: true,
        filter: true
        },
      { other columns here }
      ];
      this.rowSelection = "multiple";
      },
   mounted() {
   this.gridApi = this.gridOptions.api;
   this.gridColumnApi = this.gridOptions.columnApi;
  },
  methods: {
    onSelectionChanged() {
     var selectedRows = this.gridApi.getSelectedRows();
     var selectedRowsString = "";
     selectedRows.forEach(function(selectedRow, index) {
      if (index > 5) {
       return;
      }
      if (index !== 0) {
      selectedRowsString += ", ";
    }
    selectedRowsString += selectedRow.athlete;
  });
  if (selectedRows.length >= 5) {
    selectedRowsString += " - and " + (selectedRows.length - 5) + " others";
  }
  document.querySelector("#selectedRows").innerHTML = selectedRowsString;
},
onGridReady(params) {
  const httpRequest = new XMLHttpRequest();
  const updateData = data => {
    this.rowData = data.articles;
  };

  httpRequest.open(
    "GET",
    "myblogapistupid"
  );
  httpRequest.send();
  httpRequest.onreadystatechange = () => {
    if (httpRequest.readyState === 4 && httpRequest.status === 200) {
      console.log(httpRequest.responseText); //this works, and grid shows data in table
      updateData(JSON.parse(httpRequest.responseText));
    }
  };
   }
  }
 };

Данные отображаются в браузере, и множественный выбор также работает

Однако я вижу неопределенную выбранную ошибку ROW.

...