vue v-on:click传递动态参数的步骤


Posted in Javascript onSeptember 11, 2020

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

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

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

vue v-on:click传递动态参数的步骤

vue v-on:click传递动态参数的步骤

二、页面代码[无法可传的参数,我把它放进了一个自定义标签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="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)

补充知识: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?type=template&index=0!./src/page/home/Home.vue (Emitted value instead of an instance of Error)

Error compiling template:

<div><el-header class="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?http://localhost:8080 webpack/hot/dev-server ./src/main.js

写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这句话已经讲的很明白了,直译出来 就是:组件模板应

该包含一个根元素。如果在多个元素上使用V-IF,则使用V-ELS-IF来链接它们。

但是这么说依然让新手有点摸不着头脑,其实就是说在模版里只能有一个主div(根对象),如果有多个元素,请用一个主div包含他们

错误代码如下:

<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传递动态参数的步骤

以上这篇vue v-on:click传递动态参数的步骤就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js模拟弹出效果代码修正版
Aug 07 Javascript
Javascript 设计模式(二) 闭包
May 26 Javascript
杨氏矩阵查找的JS代码
Mar 21 Javascript
jscript读写二进制文件的方法
Apr 22 Javascript
AngularJS 服务详细讲解及示例代码
Aug 17 Javascript
解析javascript图片懒加载与预加载的分析总结
Oct 27 Javascript
使用D3.js制作图表详解
Aug 13 Javascript
基于js中的原型(全面讲解)
Sep 19 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
Nov 27 Javascript
JS实现滑动插件
Jan 15 Javascript
浅谈vue.watch的触发条件是什么
Nov 07 Javascript
vue Cli 环境删除与重装教程 - 版本文档
Sep 11 #Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
Sep 11 #Javascript
请求时token过期自动刷新token操作
Sep 11 #Javascript
vue+axios 拦截器实现统一token的案例
Sep 11 #Javascript
Vue axios获取token临时令牌封装案例
Sep 11 #Javascript
Vue-cli4 配置 element-ui 按需引入操作
Sep 11 #Javascript
vue 子组件和父组件传值的示例
Sep 11 #Javascript
You might like
php $_ENV为空的原因分析
2009/06/01 PHP
PHP7下协程的实现方法详解
2017/12/17 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
JavaScript 解析读取XML文档 实例代码
2009/07/07 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
不同浏览器的怪癖小结
2010/07/11 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
2013/06/06 Javascript
使用javascript实现判断当前浏览器
2015/04/14 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
2017/07/27 Javascript
vue项目国际化vue-i18n的安装使用教程
2018/03/14 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
Python获取任意xml节点值的方法
2015/05/05 Python
django定期执行任务(实例讲解)
2017/11/03 Python
python十进制和二进制的转换方法(含浮点数)
2018/07/07 Python
flask入门之表单的实现
2018/07/18 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
python3的UnicodeDecodeError解决方法
2019/12/20 Python
Tensorflow: 从checkpoint文件中读取tensor方式
2020/02/10 Python
pytorch中的weight-initilzation用法
2020/06/24 Python
HTML5的结构和语义(4):语义性的内联元素
2008/10/17 HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
Toppik顶丰增发纤维官网:解决头发稀疏
2017/12/30 全球购物
软件测试工程师面试问题精选
2016/10/28 面试题
艺术爱好者的自我评价分享
2013/10/08 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
2014年乡镇领导个人整改措施
2014/09/19 职场文书
2014年法院工作总结
2014/11/24 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书
男人帮观后感
2015/06/18 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技