1. 程式人生 > 實用技巧 >VUE字串模板@click失效

VUE字串模板@click失效

在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 }