vue v-on:click傳遞動態參數

最近項目中要為一個循環列表動態傳送當前點擊列的數據，查了很久資料也沒有一個完美的解決方案，

新手只能用vue的事件處理器與jquery的選擇器做了一個不倫不類的方案，居然也能解決這個問題，作此記錄留待以后會有更好的方法解決這個事情 

 

需求：根據每列傳遞的參數，決定彈窗后面是積分夠了去直接購買還是不夠需要去轉換

 

二、頁面代碼[無法可傳的參數，我把它放進了一個自定義標簽date-id]

<div class="ticket-main">
         <a href="javascript:void(0);" class="weui_media_box weui_media_appmsg weui_media_box_bg" v-for="item in mediaBox" :date-id="item.num" v-on:click="upHref($event)">
             <div class="weui_media_hd">
                 <img class="weui_media_appmsg_thumb" :src="item.mediaBoxImg" alt="" />
             </div>
             <div class="weui_media_bd">
                 <h4 class="weui_media_title" v-text="item.name">雙色球彩票一注</h4>
                 <p class="weui_media_desc"><span class="icon icon-2"></span><span v-text="item.price"></span>鋇</p>
             </div>
         </a>
     </div>

三、js代碼

var secretRecipe = new Vue({
    el: "#secret-recipe",
    data: {
        pointsNum: [],
        mediaBox:[]
    },
    methods:{
        upHref:function(e){
            hrefSrc(e.currentTarget);
        }
    }
});
var prize=[
    {mediaBoxImg:"../b2b-reception/images/secret/icon_01.png",name:"雙色球彩票一注",price:'250',num:"1"},
    {mediaBoxImg:"../b2b-reception/images/secret/icon_02.png",name:"50M流量",price:'230',num:"2"},
    {mediaBoxImg:"../b2b-reception/images/secret/icon_03.png",name:"景點抽抽樂",price:"300",num:"3"}
    ];
$(function(){
    
    secretRecipe.mediaBox = prize;
    
})

function hrefSrc(v){
    console.log($(v).attr("date-id"));
    $.modal({
        title: "支付方式",
        text: "選擇你的支付方式",
        buttons: [
          { text: "轉化積分", onClick: function(){ $.alert("你選擇了轉化積分"); } },
          { text: "立即購買", onClick: function(){ $.alert("你選擇了立即購買"); } },
          { text: "取消", className: "default"},
        ]
      });
}

 

重點說明：$event，官方文檔中是說該對象【在監聽原生 DOM 事件時，方法以事件為唯一的參數。如果使用內聯語句，語句可以訪問一個 $event 屬性：v-on:click="handle('ok', $event)"。】

handle(e){e.currentTarget}方法接收時取的是點擊的該DOM本身

handle(e){e.target}方法接收時取的是點擊的該元素

handle(e){e.target.tagName}方法接收時取的是點擊的該元素的標簽名(如div.p.img)