Cannot read property 'setQuickFilter' of undefined" in ag-grid Vue

Question

I try to filter the ag-grid by using a select box. The grid definition is:

<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 Part is :

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

and i try to capture the value of select box on watch in Vue:

watch: {

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

after i select in select box then i see the error:

"TypeError: Cannot read property 'setQuickFilter' of undefined"

any one can help me? thank you

Answer 1

Check this post

You need to use gridReady function to bind gridApi to the local property.

Once you will bind it, you would be able to use this.gridApi.setQuickFilter(this.quickFilterText);