为什么不使用vuejs将新行添加到农业网格中？

问题描述

我在这样声明的vue.js应用程序中有一个ag-grid组件：

<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>

绑定到此打字稿视图模型：

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),[]);
    }
}

页面首次显示时，我得到了正确的数据。当我用新数据调用updateDocuments时，网格不会更新。我已经在vue devtools中验证了rowData道具正在更新。农业网格文档将建议组件应对此更改做出反应。有什么想法我做错了吗？

解决方法

啊哈。终于弄明白了，贴在这里以防对其他人有帮助。

看起来我的问题是同时绑定 gridOptions 和 rowData。一切正常除了在更改 rowData 时的刷新。我假设这是因为网格选项有自己的 rowData 属性，而 ag-grid 包装器使用来自一个副本的数据并检测另一个副本（或类似的东西）的变化。

我用 gridOptions 绑定替换了 columnDefs 绑定（在这种情况下，我需要设置的唯一选项）并且一切都开始正常工作。