Iview-ui JSX binding click event reported an error

problem description

use the Table component of iview-ui to render the operation column of the table through JSX, but when the button is bound to click the event, an error is reported:
vue.esm.js?efeb:591 [Vue warn]: Invalid handler for event "click": got undefined

the environmental background of the problems and what methods you have tried

Project .babelrc has been configured to support JSX, and components can render it
query the official Vue documentation and the Git documentation of JSX to confirm that the event binding is fine

ide/render-function.html-sharpJSX" rel=" nofollow noreferrer "> https://cn.vuejs.org/v2/guide.
https://www.cnblogs.com/wenst.
https://github.com/vuejs/babe.

related codes

vue components

<template>
    <div>
        <div>
            <h4 class="font-weight-bold py-3 mb-4"></h4>
             This page is an example of basic layout. For more options use
                <strong>Vue starter template generator</strong> in the docs.
        </div>
        <b-card header="" header-tag="h6" class="mb-4">
            <Table stripe border :columns="table.columns" :data="table.dataList"></Table>
        </b-card>
    </div>
</template>

<script>
import iView from "iview"
Vue.use(iView)

export default {
    name: "ReportIndex",
    data() {
        return {
            table: {
                showIndex: false,
                dataList: [
                    {
                        origin_name: "",
                        quota: 1000,
                        total: 99999
                    },
                    {
                        origin_name: "",
                        quota: 1000,
                        total: 99999
                    },
                    {
                        origin_name: "",
                        quota: 1000,
                        total: 99999
                    }
                ],
                columns: [
                    {
                        title: "",
                        key: "origin_name"
                    },
                    {
                        title: "",
                        key: "quota"
                    },
                    {
                        title: "",
                        key: "total"
                    },
                    {
                        title: "",
                        render (h) {
                            return (
                                <div>
                                    <i-button type="primary" size="small" class="mr-2" on-click={this.goConsole}></i-button>
                                    <i-switch>
                                        <span slot="open"></span>
                                        <span slot="close"></span>
                                    </i-switch>
                                </div>
                            )
                        }
                    }
                ]
            }
        };
    },
    created() {},
    methods:{
        goConsole: function(){
            console.log(123)
        }
    }
};
</script>

what result do you expect? What is the error message actually seen?

render:(h) =>{ console.log(this) return ( <div> < i-button type="primary" size="small" class="mr-2" onClick={this.goConsole}> </i-button> < i-switch> <span slot="open"> </span> < span slot="close"> </span> </i-switch> </div> ) }