EasyUI Forum
July 17, 2024, 04:40:19 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: single CheckBox getting error when unchecked  (Read 10907 times)
dewan
Newbie
*
Posts: 24


View Profile
« 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
Logged
jarry
Administrator
Hero Member
*****
Posts: 2269


View Profile Email
« Reply #1 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
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!