vue v-on:click传递动态参数的步骤
(编辑：jimmy 日期: 2024/12/25 浏览：2)
最近项目中要为一个循环列表动态传送当前点击列的数据，查了很久资料也没有一个完美的解决方案，
新手只能用vue的事件处理器与jquery的选择器做了一个不伦不类的方案，居然也能解决这个问题，作此记录留待以后会有更好的方法解决这个事情
需求：根据每列传递的参数，决定弹窗后面是积分够了去直接购买还是不够需要去转换
二、页面代码[无法可传的参数，我把它放进了一个自定义标签date-id]
<div class="ticket-main">
<a href="javascript:void(0);" rel="external nofollow" 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="/UploadFiles/2021-04-02/item.mediaBoxImg">
三、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)
补充知识：VUE之命令行报错：Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead 解决办法
Failed to compile.
./node_modules/vue-loader/lib/template-compiler"id":"data-v-59926570","hasScoped":true,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js"animated faedOutUp"><myHeader></myHeader></el-header></div> <div>这里才是首页</div>
- Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
@ ./src/page/home/Home.vue 11:0-366
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client"htmlcode">
<template>
<div><el-header class="animated faedOutUp"><myHeader></myHeader></el-header></div>
<div>这里才是首页</div>
</template>
修改后如下
<template>
<div>
<el-header class="animated faedOutUp"><myHeader></myHeader></el-header>
<div>这里才是首页</div>
</div>
</template>
保存运行，错误解决了！
以上这篇vue v-on:click传递动态参数的步骤就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。