問題的背景：
說一說近期碰到的一個困擾我很久的問題吧：問題是在編寫一個vue2.0+easyUI的頁面的時候出現(xiàn)的。
就像這樣的一張圖表，需求很簡單，就是每一行最右邊的操作欄都有一個按鍵，可以操作單行的數(shù)據(jù)
問題的出現(xiàn)：
超簡單！往里面放一個按鈕不就可以了嗎！于是，我試圖著手在這一行里放入一個按鈕，但一看代碼，Oh my god！
// 表數(shù)據(jù)
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了么！！
就在這里，問題出現(xiàn)了，直接在下面接一個function是無法調(diào)用到的，而如果把方法寫在window里面的話，又沒有辦法獲取到當(dāng)前vue的this對象，只能用router做一個跳轉(zhuǎn)，無法操作當(dāng)前vue的對象里的數(shù)組變量。
window.turnToUserEdit=function(id){
? ? ?router.push({ path:'/userAddOrEdit',query:{userId:id}});
}
這可如何是好，這讓剛接觸vue的我慌了神
問題的剖析：
這個問題，在邏輯上來說應(yīng)該是很好理解的，出現(xiàn)這個問題，也是無比正常的
在我的理解中，對vue代碼的理解，需要分為編譯前和編譯后，用動態(tài)添加Html標(biāo)簽的方法，實際上就是在編譯后添加進這個html語句，再生成這個控件，這時候在控件里寫的onclick就是去找編譯后的叫這個名稱的方法，而直接寫function的話，就生成的是編譯前的方法，生成html之后在去找這個方法，必然是找不到的，找到的只能是后面寫在window.function的全局方法，這個情況就像是下圖
那么，調(diào)用到了window.EditUser方法，那必然是拿不到當(dāng)前vue的this指針的，因為編譯后等于是把各個vue都混在了一起，誰分得清楚你和我呢！
問題的解決：
額，那，咋辦呢。。。
琢磨了很長時間，參考了segmentFault和stackOverflow上的一些意見，大致的意思是，這個地方，要建一個vue（帶方法的）再給他編譯一下，然后塞到這個按鈕里，怎么塞進按鈕里呢，就是編譯完之后，找到我們之前放的這個a標(biāo)簽的節(jié)點，給它append一個child，放進我們的這個vue，這樣事件就可以自定義，而且能獲取到當(dāng)前的對象啦！具體的寫法的話大致是這樣噠！
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標(biāo)簽的id后面追加一個行號就可以了。
至此，事件圓滿解決啦~
稍微總結(jié)一下：
? ? ? ?出現(xiàn)這個現(xiàn)象的主要問題在vue的編譯前和編譯后不同的這個特性中，個人覺得，如果可以，還是應(yīng)該盡量的去避免動態(tài)添加html標(biāo)簽，easyUI這個寫法比較特殊，也可能有其他的控件有這種特殊的要求，在一般的操作中，還是使用v-的標(biāo)簽來進行顯示的選擇比較好
