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事件

	//实际列值填充
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(&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,"'");