Vue js拼接onclick事件
- 1.onclick 方法函数找不到
- 2.方法中传参
- 2.1 int 类型传参（`直接传参`）
- 2.2 字符串类型（`需要加引号`）
- 2.3 对象（`对象是不能直接拼接的。拼接的必须是字符串。因此需要将对象转成字符串。`）
1.onclick 方法函数找不到
我是拼接的
表格，点击的<td>标签；
- 拼接html 并增加onclick事件
//实际列值填充
tablHtml += `<tdοnclick="previewNvrVideo(${data})">${columnItem?.actual}</td>`;
2.页面刚进去 注册点击函数(重要)
mounted() {//模板参数传参const _this = this;window.previewNvrVideo = (channelNum) => {_this.nvrPreview(channelNum);};
}
3.js 中 写点击函数内容
nvrPreview(data) {//点击之后 实现的逻辑
},
2.方法中传参
2.1 int 类型传参（直接传参）
tablHtml += `<td οnclick="previewNvrVideo(1)">${columnItem?.actual}</td>`;
2.2 字符串类型（需要加引号）
1.使用转义字符
tablHtml += `<td οnclick="previewNvrVideo(\'${data}\')"${columnItem?.actual}</td>`;
注意：JS中写法：str2 = '<div onclick="test2(\''+string+'\')">33</div>'
2.使用"（"是双引号，单引号为'，但是IE不支持）
tablHtml += `<td οnclick="previewNvrVideo("${data}")"${columnItem?.actual}</td>`;
2.3 对象（对象是不能直接拼接的。拼接的必须是字符串。因此需要将对象转成字符串。）
报错信息：如果直接使用对象。触发事件时会得到（[onject Object]）。会引起Uncaught SyntaxError: Unexpected identifier错误
- 将对象拆开，只穿需要传递的参数（参考第二点，需要转义）
- 设置全局变量
- 使用JSON.stringify()将对象转换成json字符串，但是依然会报错
unexpected end of input，
该错误是因为json字符串的双引号和onclick的双引号冲突，需要将json字符串转成单引号字符串。
JSON.stringify(data).replace(/\"/g,"'");
