问题的背景：
说一说近期碰到的一个困扰我很久的问题吧：问题是在编写一个vue2.0+easyUI的页面的时候出现的。
easyUI的图表，在Vue中的展示
就像这样的一张图表，需求很简单，就是每一行最右边的操作栏都有一个按键，可以操作单行的数据
问题的出现：
超简单！往里面放一个按钮不就可以了吗！于是，我试图着手在这一行里放入一个按钮，但一看代码，Oh my god！
// 表数据
tableObj.data=[];
if(dataList.length>0) {
for(vari=0; i<dataList.length; i++) {
var subData={
"userId":dataList[i].id,
"userName":dataList[i].value,
"operate":getOperateHtml(i),
};
tableObj.data.push(subData);
}
}
这每一行一行的，居然全部都是只允许往里面放字符串的！！好吧，那怎么办呢，简单！把控件写成字符串放进去就可以了啊，于是，我写出了上面的operate字段中的getOperateHtml方法
functiongetOperateHtml(id) {
var operateHtml = '<a onclick="turnToUserEdit(\''+id+'\')"'+"id='editUserBtn' style='color:#07bb49;display:none;'class='editUserBtn'>编辑"</a>";
return operateHtml;
easy!这样的话，我在下面补上一个turnToUserEdit(id)方法不就ok了么！！
就在这里，问题出现了，直接在下面接一个function是无法调用到的，而如果把方法写在window里面的话，又没有办法获取到当前vue的this对象，只能用router做一个跳转，无法操作当前vue的对象里的数组变量。
window.turnToUserEdit=function(id){
router.push({ path:'/userAddOrEdit',query:{userId:id}});
}
这可如何是好，这让刚接触vue的我慌了神
问题的剖析：
这个问题，在逻辑上来说应该是很好理解的，出现这个问题，也是无比正常的
在我的理解中，对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: '<a style="color:#07bb49;" v-on:click="world('+"'"+id+"'"+')">删除</a>',
methods:{
world:function(id) {
alert(this.data);
}
}
});
varcomponent= newMyComponent().$mount();
document.getElementById('edituser').appendChild(component.$el);
至于第几行什么的，在这个edituser的a标签的id后面追加一个行号就可以了。
至此，事件圆满解决啦~
稍微总结一下：
出现这个现象的主要问题在vue的编译前和编译后不同的这个特性中，个人觉得，如果可以，还是应该尽量的去避免动态添加html标签，easyUI这个写法比较特殊，也可能有其他的控件有这种特殊的要求，在一般的操作中，还是使用v-的标签来进行显示的选择比较好
网友评论