当前位置: 首页 > news >正文

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

Vue js拼接onclick事件

  • 1.onclick 方法函数找不到
  • 2.方法中传参
    • 2.1 int 类型传参(`直接传参`)
    • 2.2 字符串类型(`需要加引号`)
    • 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.使用&quot;&quot;是双引号,单引号为&apos;,但是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,"'");

http://www.lryc.cn/news/330853.html

相关文章:

  • 基于springboot实现定时任务,并且添加Event事件处理机制
  • 深入理解数据结构(1):复杂度详解
  • kette介绍-Step之Merge Join
  • 通俗易懂:MySQL中如何设置只读实例并确保数据一致性?
  • 一文了解Java核心知识——线程池
  • Redis热点Key问题分析与解决
  • 深度学习armv8/armv9 cache的原理
  • Python基础之pandas:文件读取与数据处理
  • 基于Springboot旅游网站管理系统设计和实现
  • 深度解析C语言——预处理详解
  • idea2023.2.1 java项目-web项目创建-servlet类得创建
  • Ollama教程——入门:开启本地大型语言模型开发之旅
  • 基于PHP的新闻管理系统(用户发布版)
  • 基础篇3 浅试Python爬虫爬取视频,m3u8标准的切片视频
  • Adaboost集成学习 | Matlab实现基于BiLSTM-Adaboost双向长短期记忆神经网络结合Adaboost集成学习时间序列预测(股票价格预测)
  • MySQL两表联查之分组成绩第几问题
  • 每日一题(leetcode2952):添加硬币最小数量 初识贪心算法
  • [Errno 2] No such file or directory: ‘g++‘
  • go的通信Channel
  • 手写红黑树【数据结构】
  • [蓝桥杯练习]通电
  • 安全算法 - 摘要算法
  • 操作系统:动静态库
  • 车载电子电器架构 —— 局部网络管理汇总
  • 网络安全 | 什么是DDoS攻击?
  • [Godot] 3D拾取
  • 知识融合:知识图谱构建的关键技术
  • 外贸建站:WordPress搭建外贸独立站零基础自建站完整教程(2024)
  • 【教程】Kotlin语言学习笔记(五)——Lambda表达式与条件控制
  • C++的并发世界(三)——线程对象生命周期