为什么没有使用vuejs将新行添加到ag网格中

Question

我在一个vue.js应用程序中有一个ag网格组件，声明如下：

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

绑定到此typescript视图模型：

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网格文档会建议组件应该对更改做出反应。你知道我做错了什么吗？

Answer 1

啊哈。终于想通了，在这里发帖，以防对其他人有帮助。

看起来我的问题是同时绑定gridOptions和rowData。当rowData被更改时，除了刷新的之外，一切都很好。我假设这是因为网格选项有自己的rowData属性，而ag网格包装器使用一个副本中的数据并检测另一个副本上的更改(或类似的内容(。

我用columnDefs绑定替换了gridOptions绑定(在本例中，这是我需要设置的唯一选项(，一切都开始正常工作。

Answer 2

try:

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

或

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