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
