Cannot read property ‘setQuickFilter’ of undefined” in ag-grid Vue


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"


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.$;
                    this.quickFilterText = companyNames;
                    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


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

Leave a Reply

Your email address will not be published. Required fields are marked *