js 拼接HTML时 onclick方法和传参报错[onject Object] 和 unexpected end of input`

Vue js拼接onclick事件

  • [1.onclick 方法函数找不到](#1.onclick 方法函数找不到)
  • 2.方法中传参
    • [2.1 int 类型传参(`直接传参`)](#2.1 int 类型传参(直接传参))
    • [2.2 字符串类型(`需要加引号`)](#2.2 字符串类型(需要加引号))
    • [2.3 对象(`对象是不能直接拼接的。拼接的必须是字符串。因此需要将对象转成字符串。`)](#2.3 对象(对象是不能直接拼接的。拼接的必须是字符串。因此需要将对象转成字符串。))

1.onclick 方法函数找不到

我是拼接的表格,点击的<td>标签;

  1. 拼接html 并增加onclick事件
javascript 复制代码
	//实际列值填充
tablHtml += `<td
				οnclick="previewNvrVideo(${data})">
				${columnItem?.actual}
			</td>`;

2.页面刚进去 注册点击函数(重要)

bash 复制代码
mounted() {
	//模板参数传参
	const _this = this;
	window.previewNvrVideo = (channelNum) => {
		_this.nvrPreview(channelNum);
	};
}

3.js 中 写点击函数内容

javascript 复制代码
nvrPreview(data) {
	//点击之后 实现的逻辑
},

2.方法中传参

2.1 int 类型传参(直接传参

javascript 复制代码
tablHtml += `<td οnclick="previewNvrVideo(1)">
				${columnItem?.actual}
			</td>`;

2.2 字符串类型(需要加引号

1.使用转义字符

javascript 复制代码
tablHtml += `<td οnclick="previewNvrVideo(\'${data}\')"
				${columnItem?.actual}
			</td>`;

注意:JS中写法:str2 = '<div onclick="test2(\''+string+'\')">33</div>'

2.使用&quot;&quot;是双引号,单引号为',但是IE不支持)

javascript 复制代码
tablHtml += `<td οnclick="previewNvrVideo(&quot;${data}&quot;)"
				${columnItem?.actual}
			</td>`;

2.3 对象(对象是不能直接拼接的。拼接的必须是字符串。因此需要将对象转成字符串。

报错信息:如果直接使用对象。触发事件时会得到([onject Object])。会引起Uncaught SyntaxError: Unexpected identifier错误

  1. 将对象拆开,只穿需要传递的参数(参考第二点,需要转义)
  2. 设置全局变量
  3. 使用JSON.stringify()将对象转换成json字符串,但是依然会报错unexpected end of input
    该错误是因为json字符串的双引号和onclick的双引号冲突,需要将json字符串转成单引号字符串。

JSON.stringify(data).replace(/\"/g,"'");

相关推荐
愚昧之山绝望之谷开悟之坡10 分钟前
什么是uv和传统的区别
前端·chrome·uv
SRC_BLUE_1719 分钟前
NSSCTF - Web | 【第五空间 2021】pklovecloud
android·前端
golang学习记20 分钟前
从0死磕全栈之Next.js 数据安全实战指南:从零信任到安全架构
前端
云中雾丽22 分钟前
flutter中 getx 的使用
前端
Jay丶39 分钟前
聊聊入职新公司两个月,试用期没过这件事
前端·面试
ZTeam前端全栈进阶圈43 分钟前
Vue新技巧:<style>标签里的 CSS 也能响应式!
前端
ღ_233344 分钟前
vue3二次封装element-plus表格,slot透传,动态slot。
前端·javascript·vue.js
xiaohe06011 小时前
🔒 JavaScript 不是单线程吗?怎么还能上“锁”?!
javascript·github
摸着石头过河的石头1 小时前
JavaScript继承的多种实现方式详解
前端·javascript
ybb_ymm1 小时前
前端开发之ps基本使用
前端·css