无法读取ag-grid Vue中的未定义属性“ setQuickFilter”

Question

我尝试通过使用选择框来筛选农业电网。网格定义为：

<ag-grid-vue id="myGrid" style="width: 1140px; height:500px"

   class="ag-theme-balham"
   :columnDefs="columnDefs"
   :rowData="rowData"
   :enableSorting="true"
   :enableFilter="true"
   :pagination="true"
   :paginationPageSize="10"                                    
   :setQuickFilter="quickFilterText"
</ag-grid-vue>

数据部分为：

data() {
            return {
                columnDefs: null,
                rowData: null,
                quickFilterText: ''
     }

然后我尝试在Vue中捕获手表上选择框的值：

观看：{

    filter: {
        handler: function (filter) {
            {
                this.$nextTick(() => {
                    let companyNames = this.$refs.company.getSelectedValue();
                    this.quickFilterText = companyNames;
                    gridOptions.api.setQuickFilter(this.quickFilterText);
                    document.addEventListener('DOMContentLoaded', function() {
                        let gridDiv = document.querySelector('#myGrid');
                        new agGrid.Grid(gridDiv, gridOptions);
                    });
                });
            }
        },
        deep: true
    }
},

在选择框中选择之后，我会看到错误：

“ TypeError：无法读取未定义的属性'setQuickFilter'”

有人可以帮助我吗？谢谢

Answer 1

检查this post

您需要使用fn函数将gridReady绑定到本地属性。

一旦您将其绑定，便可以使用  gridApi