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.mzph.cn/news/780785.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

全量知识系统 之“程序”详细设计 之 “絮”---开端“元素周期表”表示的一个“打地鼠”游戏

全量知识系统 之“程序”详细设计 概述-概要和纪要 序 絮&#xff08;一个极简的开场白--“全量知识系统”自我介绍&#xff09; 将整个“人生”的三个阶段 比作“幼稚园”三班 &#xff1a; 第一步【想】-- “感性”思维游戏&#xff1a;打地鼠 。学前教育-新生期&#x…

js的Number对象和全局对象

文章目录 1. Number 对象1.1. 含义1.2. 属性1.3. 方法 2. 全局对象2.1. 含义2.2. 特点2.3. 属性2.4. 方法 3. 函数的本质 1. Number 对象 1.1. 含义 Number 对象是原始数值的包装对象。 const num 2.334; const obj new Number(num); console.log(obj); //Number console.…

Windows安装tomcat,以服务的方式管理,如何设置虚拟内存

之前工作中&#xff0c;部署tomcat都是使用Linux服务器&#xff0c;最近遇到个客户&#xff0c;提供的服务器是Windows server&#xff0c;并且需要通过服务的方式管理tomcat&#xff1b;以自己多年的码农经验&#xff0c;感觉应该没有问题&#xff0c;结果啪啪打脸了&#xf…

双向BFS

P1032 [NOIP2002 提高组] 字串变换 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 方法学自于B19 双向BFS 字串变换_哔哩哔哩_bilibili #include<iostream> #include<algorithm> #include<cstdio> #include<queue> #include<map> using namesp…

Adaboost集成学习 | Matlab实现基于BiLSTM-Adaboost双向长短期记忆神经网络结合Adaboost集成学习时间序列预测(股票价格预测)

目录 效果一览基本介绍模型设计程序设计参考资料效果一览 基本介绍 Matlab实现基于BiLSTM-Adaboost双向长短期记忆神经网络结合Adaboost集成学习时间序列预测(股票价格预测) 模型设计 股票价格预测是一个具有挑战性的时间序列预测问题,可以使用深度学习模型如双向长短期记忆…

python爬虫之selenium4使用(万字讲解)

文章目录 一、前言二、selenium的介绍1、优点&#xff1a;2、缺点&#xff1a; 三、selenium环境搭建1、安装python模块2、selenium4新特性3、安装驱动WebDriver驱动选择驱动安装和测试 基础操作1、属性和方法2、单个元素定位通过id定位通过class_name定位一个元素通过xpath定位…

【P1098】[NOIP2007 提高组] 字符串的展开

[NOIP2007 提高组] 字符串的展开 题目描述 在初赛普及组的“阅读程序写结果”的问题中&#xff0c;我们曾给出一个字符串展开的例子&#xff1a;如果在输入的字符串中&#xff0c;含有类似于 d-h 或者 4-8 的字串&#xff0c;我们就把它当作一种简写&#xff0c;输出时&#…

uView对比1.X

uView2.0与uView1.x之间&#xff0c;是有非常大差异的&#xff0c;1.x不能升级到2.x版本。 造成这个问题的根本原因是&#xff0c;2.x是一个重构版本&#xff0c;对1.x进行了整个架构的改造升级&#xff0c;摒弃了1.x中一些不合理的理念和做法&#xff0c;同时引入很多优秀的新…

飞书裁员提供补偿方案或者转岗机会

近期&#xff0c;飞书CEO谢欣发布了一封全员信&#xff0c;宣布公司将进行新一轮的组织调整&#xff0c;其中包括适当精简团队规模。这一决定是为了解决组织自身存在的问题&#xff0c;如团队规模较大但组织不够精干&#xff0c;效率降低&#xff0c;以及力量不够聚焦&#xff…

【OJ】动归练习五之子组串

个人主页 &#xff1a; zxctscl 如有转载请先通知 题目 1. 53. 最大子数组和1.1 分析1.2 代码 2. 918. 环形子数组的最大和2.1 分析2.2 代码 3. 152. 乘积最大子数组3.1 分析3.2 代码 4. 1567. 乘积为正数的最长子数组长度4.1 分析4.2 代码 1. 53. 最大子数组和 1.1 分析 一、…

密码学基础-对称密码/公钥密码/混合密码系统 详解

密码学基础-对称密码/公钥密码 加解密说明1.加密解密必要因素加密安全性说明 什么是对称密码图示说明对称密码详解什么是DES?举例说明 什么是3DES什么是AES? 公钥密码什么是RSA? 对称密钥和公钥密码优缺点对比对称密码对称密码算法总结对称密码存在的问题? 公钥密码公钥密码…

npm ERR! errno CERT_HAS_EXPIRED

1 问题描述 使用npm命令安装相关依赖报错&#xff1a;npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.npm.taobao.org/vue%2fcli failed, reason: certificate has expired报错示例图如下所示&#xff1a; 2原因分析…

Spring Boot 整合分布式搜索引擎 Elastic Search 实现 自动补全功能

文章目录 ⛄引言一、分词器⛅拼音分词器⚡自定义分词器 二、自动补全查询三、自动补全⌚业务需求⏰实现酒店搜索自动补全 四、效果图⛵小结 ⛄引言 本文参考黑马 分布式Elastic search Elasticsearch是一款非常强大的开源搜索引擎&#xff0c;具备非常多强大功能&#xff0c;…

03---java面试八股文——spring-----注解-------10题

21、什么是基于注解的容器配置 基于注解的容器配置是指使用注解来代替传统的 XML 配置文件&#xff0c;来配置 Spring 容器和 bean。在基于注解的配置中&#xff0c;开发者可以使用注解来声明 bean、注入依赖关系、管理事务等&#xff0c;而不需要显式地在 XML 配置文件中进行…

谈一谈BEV和Transformer在自动驾驶中的应用

谈一谈BEV和Transformer在自动驾驶中的应用 BEV和Transformer都这么火&#xff0c;这次就聊一聊。 结尾有资料连接 一 BEV有什么用 首先&#xff0c;鸟瞰图并不能带来新的功能&#xff0c;对规控也没有什么额外的好处。 从鸟瞰图这个名词就可以看出来&#xff0c;本来摄像头…

阿里云Salesforce CRM功能差异列表 - Winter‘24

阉割版的阿里云Salesforce由于技术和监管等因素与国际版的Salesforce差距很大&#xff01; 一、Winter‘ 24版差异概况&#xff1a; 1.1. 主要版本&#xff1a; 阿里云上的 Salesforce 提供两个版本&#xff0c;用于生产用途的 CN 版本&#xff08;CN Edition&#xff09;和用…

如何理解SW8110Q搭配UWB使用的功率放大器

SW8110Q是一个搭配DW1000使用的前端模块(FEM)&#xff0c;具有完全集成的功率放大器(PA)和低噪声放大器(LNA)。SW8110Q不需要外部匹配组件&#xff0c;降低了组装复杂性和PCB面积&#xff0c;实现了经济高效的解决方案。 SW8110Q实现了高发射功率、137低收发1381切换4191损耗。…

SqlSugar快速入门

文章目录 配置SqlSugar0、引入SqlSugarCore包1、编写Context类2、配置实体类3、创建Service服务类进行数据库的CRUD4、配置Controller进行路由 配置SqlSugar 0、引入SqlSugarCore包 1、编写Context类 public static SqlSugarClient db new SqlSugarClient(new ConnectionCon…

vitess sysbench性能测试

参考资料&#xff1a; 1、sysbench的使用&#xff1a; https://blog.51cto.com/u_15739244/5781745 1、 安装和部署 1.1 、安装sysbench git clonehttps://github.com/akopytov/sysbench.git cd sysbench git checkout 0.5 yum -y install make automake libtool pkgconf…

Python进行DevOps实践

使用Python进行DevOps实践可以涉及多个方面&#xff0c;从自动化部署、配置管理、监控到日志分析等等。下面是一些具体的方法和实践&#xff0c;展示如何使用Python在DevOps环境中进行工作&#xff1a; 1. 自动化部署 使用Python编写自动化部署脚本&#xff0c;可以极大地提高…