vue 拼接html添加点击事件

在项目中某些情况不能使用vue的模板，需要拼接出html。在网上看了很多资料发现都不行，最后使用最原始的方法，在此记录一下。

一开始我的思路是点击事件调用vue中的方法，html字符串如下,使用的是es6的模板字符串：

var contentHtml = `<div>
      <div class="title">
         <span>情况信息</span>
      </div>
//.....其他详细内容
<div class="event-detail-btn" onclick="${this.gotoDetail(obj.pid})}">>></div>
</div>`;

但是发现这样会导致gotoDetail方法默认被调用，哪位大神知道这个要怎么解决呢。

我现在的方法是使用原生的document.createElement方法,在最外层嵌套一个div，将有点击事件的div通过appendChild拼接上去:

var html = document.createElement("div");
var contentHtml = `<div>
      <div class="title">
         <span>情况信息</span>
      </div>
    //.....其他详细内容
  </div>`;
html.innerHTML=contenthtml;
let btn = document.createElement("div");//按钮
btn.setAttribute("class","event-detail-btn");
btn.innerHTML=">>";
btn.onclick=function(){
   $this.$router.push({name:"detail2",params:{pid:obj.pid}});
}
html.appendChild(btn);

大家如果有更好的方法交流一下呀。