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

相关推荐
uncleTom666几秒前
前端布局利器:rem 适配全面解析
前端
谦哥3 分钟前
Claude4免费Vibe Coding!目前比较好的Cursor替代方案
前端·javascript·claude
LEAFF14 分钟前
如何 测试Labview是否返回数据 ?
前端
Spider_Man16 分钟前
🚀 从阻塞到丝滑:React中DeepSeek LLM流式输出的实现秘籍
前端·react.js·llm
心在飞扬17 分钟前
理解JS事件环(Event Loop)
前端·javascript
敲代码的玉米C21 分钟前
深入理解链表反转:从基础到进阶的完整指南
javascript
盏茶作酒2933 分钟前
打造自己的组件库(一)宏函数解析
前端·vue.js
山有木兮木有枝_1 小时前
JavaScript 设计模式--单例模式
前端·javascript·代码规范
一大树1 小时前
Vue3 开发必备:20 个实用技巧
前端·vue.js
颜渊呐1 小时前
uniapp中APPwebview与网页的双向通信
前端·uni-app