vue模板字符串中点击事件传递参数

需求是在百度地图的信息窗口中点击跳转到点位的详情页面，所以用到了模板字符串的点击传参，在此记录一下：
如图：

信息窗口使用了模板字符串，点击查看按钮跳转详情，代码如下：

const sContent = `<div class="map-box"><div class="map-btn" onClick="btnFun('${v.name}')">查看详情</div>
</div>`;
//切记 这里是onClick="btnFun('${变量}')"

mounted中将方法绑定到window上

mounted() {window.btnFaun = this.btnFaun;
},
methods：{btnFun(data){this.$router.push({path:'/gas-detail',query:{unit: 'gas',name:data}})}
}

vue模板字符串中点击事件传递参数相关推荐

JS与JQuery点击事件传递参数
我们知道JS(javascript)是一种脚本语言,用于客户端web开发,常用来给html网页添加动态功能,是客户端运行的解释性语言. JQuery是对js的封装,简化了ajax和html的一款js框 ...
Antd-Design List渲染列中Button 点击事件传递参数
背景:使用List 渲染的后台数据列表中,点击删除按钮,可以将该项对应的主键传递给函数点击删除的时候,将该条商品记录对应的id 传递给函数,通过调用后台接口删除可以看到的是关键代码: onCli ...
swift3 按钮触发事件_swift5.3 UIView 与 UIButton 点击事件传递参数
UIView 与 UIbutton 点击事件的参数传递:目前我通过 tag 解决了 UIButton 的点击参数传递设置 UIButton 的 tag,详细见代码let playButton = U ...
Android通知点击事件传递参数
显示通知 private void processCustomMessage(Context context, Bundle bundle) {RemoteViews customView = new ...
小程序中点击事件传参
小程序是事件驱动型的,小程序可以使用点击事件传递参数: 代码如下: // wxml文件 <view class="container"> <view class= ...
vue.js 编程导航，如何传递参数？
本文主要讲述:关于vue.js 编程导航,如何传递参数? 本文主要讲述:通过vue.js 编程导航,实现路由配置和跳转页面的功能! 基础篇,仅作为简单演示. 总结不能保证用户一定会点击某些按钮并且 ...
vue中el-radio-group点击事件，双击取消
vue中el-radio-group点击事件普通用法需要实现双击取消普通用法需要注意,如果@change事件除了当前选中的单选按钮的label值,还需要带上另外的参数,则需要用event来代替 ...
微信小程序学习5：小程序语法-事件绑定之给事件传递参数
微信小程序学习5:小程序语法-事件绑定之给事件传递参数前面一讲是关于事件绑定的,下面对事件绑定进行补充. 在用户触发事件,比如点击按钮时,我们往往要传递一下参数用来识别是那个按钮,因为一个界面往往不 ...
Vue route页面跳转，传递参数接收到的参数为空
Vue在处理页面跳转传递参数的时候 var devId = row.id; this.$router.push({ name: '/showDevs/devDetail' ,params:{" ...

vue模板字符串中点击事件传递参数

vue模板字符串中点击事件传递参数相关推荐

最新文章

热门文章