vue中在字符串中添加点击事件_vue 模板字符串创建的标签怎么添加事件

如果你在用vue写项目中遇到了需要在字符串中写点击事件的奇葩写法，你会不会感到很头疼，我不知道你会不会，反正我肯定会。

没办法谁叫咋遇到了呢

话不多说，直接上代码

html:

<div class="ml-12 mr-12 mt-8" id="tableDiv" v-html="divHtml"></div>
1

采用的是v-html指令将元素当成HTML标签解析后输出

js：

divHtml= `<div οnclick="changeCategory('${colCodes[i]}','${cols[i]}')">${cols[i]}</div>`
1

采用了模板字符串写法

注意：这里有两个巨坑

巨坑1：相信大家也发现了，字符串里的点击事件是原生的onclick,但是原生的函数changeCategory是定义在window全局对象上的，所以你在methods里面定义edit函数，触发事件是会报错的，如下：

所以得先将方法绑定到全局上，你可以在组件mounted之后，在window全局对象上定义一个这样的方法.

mounted () {
    window.changeCategory = this.changeCategory
},
1
2
3

巨坑2：触发的事件传参如果是多个参数一定要给每个参数加引号，如

changeCategory('${colCodes[i]}','${cols[i]}')
1

如果不加就会报如下错误：