vue 怎么处理html标签_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;

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: '删除',

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