Title: single CheckBox getting error when unchecked Post by: dewan on May 14, 2020, 03:29:06 AM Hi,
when i unchecked the checkbox it logs a error [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'matches' of null" found in ---> <DataGridTable> <DataGridBody> <DataGridView> <DataGrid> <LocationComponent> at resources/js/components/master_data/LocationComponent.vue <Root> TypeError: Cannot read property 'matches' of null at t.value (app.js:79964) at VueComponent.onCellClick (app.js:79964) at click (eval at createFunction (app.js:76429), <anonymous>:3:2389) at invokeWithErrorHandling (app.js:66643) at HTMLTableCellElement.invoker (app.js:66968) at HTMLTableCellElement.original._wrapper (app.js:72327) CODE ------------------------------------- <DataGrid ref="dg" :data="locations" :pagination="true" :total="total" :pageSize="pageSize" :pagePosition="pagePosition" :clickToEdit="false" :dblclickToEdit="true" selectionMode="row" editMode="row" @editEnd="onEditEnd($event)" @cellClick="onCellClick($event)" style="margin-top:5px" > <GridColumn field="ck" :width="50" align="center"> <template slot="header" slot-scope="scope"> <CheckBox v-model="allChecked" @checkedChange="onAllCheckedChange($event)"></CheckBox> </template> <template slot="body" slot-scope="scope"> <CheckBox v-model="scope.row.selected" @checkedChange="onCheckedChange($event)"></CheckBox> </template> </GridColumn> <GridColumn field="zone" title="Zone" :editable="true"/> <GridColumn field="latitude" title="Latitude" :editable="true"> <template slot="edit" slot-scope="scope"> <NumberBox v-model="scope.row.latitude" :precision="7"></NumberBox> </template> </GridColumn> <GridColumn field="longitude" title="Longitude" :editable="true"> <template slot="edit" slot-scope="scope"> <NumberBox v-model="scope.row.longitude" :precision="7"></NumberBox> </template> </GridColumn> <GridColumn field="version" title="Version" :editable="false"> <template slot="edit" slot-scope="scope"> <NumberBox v-model="scope.row.version" :precision="0"></NumberBox> </template> </GridColumn> </DataGrid> <Panel :bodyStyle="{padding:'20px'}"> <template slot="footer"> <Pagination :total="total" :pageSize="pageSize" :pageNumber="pageNumber" @pageChange="onPageChange($event)"></Pagination> </template> </Panel> computed: { checkedRows() { return this.locations.filter(row => row.selected); } }, methods: { onAllCheckedChange(checked) { if (this.rowClicked) { return; } this.locations = this.locations.map(row => { return Object.assign({}, row, { selected: checked }); }); }, onCheckedChange(checked) { this.allChecked = this.checkedRows.length === this.locations.length; this.rowClicked = true; this.$nextTick(() => (this.rowClicked = false)); }, } Thank you Title: Re: single CheckBox getting error when unchecked Post by: jarry on May 14, 2020, 08:37:37 PM Please refer to this example for checkbox selection.
https://www.jeasyui.com/demo-vue/main/index.php?plugin=DataGrid&theme=material-blue&dir=ltr&pitem=CheckBox%20Selection&sort=asc |