为什么不使用 vuejs 将新行添加到 ag-grid？

Question

I've got an ag-grid component in a vue.js application declared like this:

<ag-grid-vue :enable-sorting="false"
                                 :enable-filtering="false"
                                 :suppressDragLeaveHidesColumns="true"
                                 :rowData="category.policyDocuments"
                                 :gridOptions="policyGridOptions"
                                 @cellValueChanged="savePolicyRow"
                                 @grid-ready="onPolicyGridReady($event, category)"
                                 class="w-100"
                                 style="height: 200px">
</ag-grid-vue>

Bound to this typescript view model:

export class PolicyListViewModel {
    status: PolicyDashboardStatus;

    policyLists: DocumentWalletPolicyDocumentList[] = [];

    gridApi: GridApi | null = null;

    policyDocuments: DocumentWalletDocumentViewModel[] = [];

    constructor(status: PolicyDashboardStatus) {
        this.status = status;
    }

    get shouldShow(): boolean {
        return this.policyDocuments.length > 0;
    }

    updateDocuments(): void {
        this.policyDocuments = this.policyLists
            .map(list => list.policyDocuments)
            .reduce((a, b) => a.concat(b), []);
    }
}

When my page first displays I get the right data. When I call updateDocuments with new data the grid does not update. I have verified in vue devtools that the rowData prop is being updated. ag-grid documentation would suggest that the component should react to the change. Any ideas what I am doing wrong?

Answer 1

Ah-ha. Finally figured it out, posting here in case it helps anyone else.

It looks like my problem was binding both gridOptions and rowData at the same time. Everything was working fine except for the the refresh when rowData was changed. I'm assuming this is because the grid options had its own rowData property and the ag-grid wrapper was using the data from one copy and detecting changes on the other (or something like that).

I replaced the gridOptions binding with a columnDefs binding (in this case the only options I needed to set) and everything started working exactly as it should.