Encountered an error while trying to clear a set filter in vuejs (native) grid filtering implementation. The specific error message reads:
[Vue warn]: Error in v-on handler: "RangeError: invalid array length"
found in
---> <GridFilterCell>
<FilterRow>
<HeaderRow>
<Header>
<Grid>
<Reports3> at src/components/Reports3.vue
<Target> at src/components/Target.vue
<App> at src/App.vue
<Root> vue.runtime.esm.js:619
RangeError: "invalid array length"
node_modules FilterRow.js:51
node_modules FilterRow.js:115
node_modules FilterRow.js:150
VueJS 4
node_modules GridFilterCell.js:258
node_modules GridFilterCell.js:229
node_modules GridFilterCell.js:164
VueJS 3
vue.runtime.esm.js:1888
The grid definition is as follows:
<Grid :style="{height: '450px'}"
:data-items="reports"
:sortable="true"
:sort="sort"
:filterable="true"
:filter="filter"
:filter-cell-render="filterRender"
:pageable="true"
:skip="skip"
:take="take"
:total="totalRecords"
:columns="columns"
@filterchange="filterChange"
@sortchange="sortChangeHandler"
@pagechange="pageChangeHandler">}
</Grid>
Below are the data() filter methods:
data(){
return{
filter: {
logic: "and",
filters: [
{ field: "institutionId", operator: "neq", value: 0 },
{ field: "typeCode", operator: "neq", value: "" },
{ field: "name", operator: "neq", value: "" }
]
},
filterChange: function (e) {
this.filter = e.filter;
},
filterRender: function (h, defaultRendering, props, change) {
return defaultRendering;
}
}
}
Referencing the telerik document page for guidance: https://www.telerik.com/kendo-vue-ui/components/grid-native/filtering/