vue v

最近项目中要为一个循环列表动态传送当前点击列的数据，查了很久资料也没有一个完美的解决方案，

新手只能用vue的事件处理器与jquery的选择器做了一个不伦不类的方案，居然也能解决这个问题，作此记录留待以后会有更好的方法解决这个事情 

需求：根据每列传递的参数，决定弹窗后面是积分够了去直接购买还是不够需要去转换

二、页面代码[无法可传的参数，我把它放进了一个自定义标签date-id]

1<div class="ticket-main">
2         <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)">
3             <div class="weui_media_hd">
4                 <img class="weui_media_appmsg_thumb" :src="item.mediaBoxImg" alt="" />
5             </div>
6             <div class="weui_media_bd">
7                 <h4 class="weui_media_title" v-text="item.name">双色球彩票一注</h4>
8                 <p class="weui_media_desc"><span class="icon icon-2"></span><span v-text="item.price"></span>钡</p>
9             </div>
10         </a>
11     </div>

三、js代码

1var secretRecipe = new Vue({
2    el: "#secret-recipe",
3    data: {
4        pointsNum: [],
5        mediaBox:[]
6    },
7    methods:{
8        upHref:function(e){
9            hrefSrc(e.currentTarget);
10        }
11    }
12});
13var prize=[
14    {mediaBoxImg:"../b2b-reception/images/secret/icon_01.png",name:"双色球彩票一注",price:'250',num:"1"},
15    {mediaBoxImg:"../b2b-reception/images/secret/icon_02.png",name:"50M流量",price:'230',num:"2"},
16    {mediaBoxImg:"../b2b-reception/images/secret/icon_03.png",name:"景点抽抽乐",price:"300",num:"3"}
17    ];
18$(function(){
19    
20    secretRecipe.mediaBox = prize;
21    
22})
23
24function hrefSrc(v){
25    console.log($(v).attr("date-id"));
26    $.modal({
27        title: "支付方式",
28        text: "选择你的支付方式",
29        buttons: [
30          { text: "转化积分", onClick: function(){ $.alert("你选择了转化积分"); } },
31          { text: "立即购买", onClick: function(){ $.alert("你选择了立即购买"); } },
32          { text: "取消", className: "default"},
33        ]
34      });
35}

重点说明：$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)