Vue页面动态添加Html标签中如何绑定事件

问题的背景：

说一说近期碰到的一个困扰我很久的问题吧：问题是在编写一个vue2.0+easyUI的页面的时候出现的。

easyUI的图表，在Vue中的展示

就像这样的一张图表，需求很简单，就是每一行最右边的操作栏都有一个按键，可以操作单行的数据

问题的出现：

超简单！往里面放一个按钮不就可以了吗！于是，我试图着手在这一行里放入一个按钮，但一看代码，Oh my god！

// 表数据
tableObj.data=[];
if(dataList.length>0) {
for(vari=0; i
var subData={
"userId":dataList[i].id,
"userName":dataList[i].value,
"operate":getOperateHtml(i),
};
tableObj.data.push(subData);
}
}

这每一行一行的，居然全部都是只允许往里面放字符串的！！好吧，那怎么办呢，简单！把控件写成字符串放进去就可以了啊，于是，我写出了上面的operate字段中的getOperateHtml方法

functiongetOperateHtml(id) {
var operateHtml = '编辑"";
return operateHtml;

window.turnToUserEdit=function(id){
}

问题的剖析：

这个问题，在逻辑上来说应该是很好理解的，出现这个问题，也是无比正常的

在我的理解中，对vue代码的理解，需要分为编译前和编译后，用动态添加Html标签的方法，实际上就是在编译后添加进这个html语句，再生成这个控件，这时候在控件里写的onclick就是去找编译后的叫这个名称的方法，而直接写function的话，就生成的是编译前的方法，生成html之后在去找这个方法，必然是找不到的，找到的只能是后面写在window.function的全局方法，这个情况就像是下图

a标签的编译前后示意图

那么，调用到了window.EditUser方法，那必然是拿不到当前vue的this指针的，因为编译后等于是把各个vue都混在了一起，谁分得清楚你和我呢！

问题的解决：

额，那，咋办呢。。。

琢磨了很长时间，参考了segmentFault和stackOverflow上的一些意见，大致的意思是，这个地方，要建一个vue（带方法的）再给他编译一下，然后塞到这个按钮里，怎么塞进按钮里呢，就是编译完之后，找到我们之前放的这个a标签的节点，给它append一个child，放进我们的这个vue，这样事件就可以自定义，而且能获取到当前的对象啦！具体的写法的话大致是这样哒！

varMyComponent=Vue.extend({
template: '删除',
methods:{
world:function(id) {
alert(this.data);
}
}
});
varcomponent= newMyComponent().$mount();
document.getElementById('edituser').appendChild(component.$el);

至于第几行什么的，在这个edituser的a标签的id后面追加一个行号就可以了。

至此，事件圆满解决啦~

稍微总结一下：

出现这个现象的主要问题在vue的编译前和编译后不同的这个特性中，个人觉得，如果可以，还是应该尽量的去避免动态添加html标签，easyUI这个写法比较特殊，也可能有其他的控件有这种特殊的要求，在一般的操作中，还是使用v-的标签来进行显示的选择比较好

作者：dragon清
链接：https://www.jianshu.com/p/398825b673e7

Vue页面动态添加Html标签中如何绑定事件

Vue.js相关栏目本月热门文章