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

Question

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

属性正在更新。 ag-grid 文档会建议组件应对更改做出反应。有什么想法我做错了吗？

Answer 1

啊哈。终于弄清楚了，发布在这里以防对其他人有帮助。

看起来我的问题是同时绑定

gridOptions

和

rowData

。一切都工作正常除了当

rowData

改变时刷新。我假设这是因为网格选项有自己的

rowData

属性，并且 ag-grid 包装器正在使用一个副本中的数据并检测另一个副本上的更改（或类似的东西）。

我将

gridOptions

绑定替换为

columnDefs

绑定（在本例中是我需要设置的唯一选项），一切都开始正常工作。

Answer 2

尝试：

 :row-data="Array.from(rowData)"

或

:row-data=[...rowData]"