iview-ui JSX绑定click事件报错

Question

问题描述

使用iview-ui的Table组件，通过JSX渲染表格的操作列，但是绑定按钮点击事件时，报错：
vue.esm.js?efeb:591 [Vue warn]: Invalid handler for event "click": got undefined

问题出现的环境背景及自己尝试过哪些方法

• 项目.babelrc已经配置好JSX的支持，组件都能渲染出来
• 查询Vue官方文档和JSX的Git文档说明，确认事件绑定是没问题的

https://cn.vuejs.org/v2/guide...
https://www.cnblogs.com/wenst...
https://github.com/vuejs/babe...

相关代码

• vue组件

<template>
    <div>
        <div>
            <h4 class="font-weight-bold py-3 mb-4">数据源管理</h4>
            <p> This page is an example of basic layout. For more options use
                <strong>Vue starter template generator</strong> in the docs.</p>
        </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>

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

你好，看了下你的代码，发了2个问题。
1、是你的this指向问题。 你这里的this指向的是row内容而不是vue的实例，所以请替换为箭头函数，这样this可以指向vue的实例。
2、jsx对应vue事件绑定的用法。你参照官网绑定事件请使用onClick而不是on-click。
第二点在你发给我的链接中有写

下面贴上代码 你可以测试下。

              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>
                )
              }

结束语：如果解决问题了，请点下采纳，如果再点下赞的话 更好了 哈哈