在vue中使用字符串模板拼接的点击事件@click时,点击事件失效的处理办法如下:
1、把@click改成onClick,如行3
1 var content = 2 `<div> 3 <div onClick="toDetail('${this.coordinate_info[i].id}')">${this.coordinate_info[i].enterprisename}<i title="查看详情" class="el-icon-info showMore"></i></div> 4 <hr/> 5 <div>地址:${this.coordinate_info[i].address}</div> 6 <div>电话:${this.coordinate_info[i].telephone}</div> 7 <div>网址:<a href="http://${this.coordinate_info[i].website}" target="_blank" >${this.coordinate_info[i].website}<a/></div> 8 </div>`;
2、在生命周期created中赋值方法给window对象,如:
1 created() { 2 window.toDetail = this.toDetail;// 解决字符串模板@click无效的问题 3 },
3、方法可以正常调用了,可以在方法内打一个debugger测试下,如:
1 methods: { 2 toDetail(value){// 查看详情 3 debugger 4 this.$router.push({ 5 path: `/orgmanage/enterpriseinfo/${value}`, 6 }); 7 } 8 }