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,"'");

相关推荐
_丿丨丨_4 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20154 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
呼啦啦呼啦啦啦啦啦啦5 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界8 小时前
前端:优秀架构的坟墓
前端·架构
拼图2098 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode8 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互