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 相关文章推荐
用ASP将SQL搜索出来的内容导出为TXT的代码
Jul 27 Javascript
url地址自动加#号问题说明
Aug 21 Javascript
让textarea自动调整大小的js代码
Apr 12 Javascript
js获取json元素数量的方法
Jan 27 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
Nov 23 Javascript
HTML5 js实现拖拉上传文件功能
Nov 20 Javascript
json的结构与遍历方法实例分析
Apr 25 Javascript
基于ES6 Array.of的用法(实例讲解)
Sep 05 Javascript
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
JavaScript canvas绘制折线图
Feb 18 Javascript
JavaScript的垃圾回收机制与内存管理
Aug 06 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
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
javascript XMLHttpRequest对象全面剖析
2010/04/24 Javascript
从js向Action传中文参数出现乱码问题的解决方法
2013/12/29 Javascript
我的NodeJs学习小结(一)
2014/07/06 NodeJs
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
js 加密压缩出现bug解决方案
2014/11/25 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
2016/06/17 Javascript
如何使用vuejs实现更好的Form validation?
2017/04/07 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
简单的三步vuex入门
2018/05/20 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
微信小程序返回上一页传参并刷新过程解析
2019/12/13 Javascript
[01:03:47]VP vs NewBee Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
[03:35]2018年度DOTA2最佳辅助位选手5号位-完美盛典
2018/12/17 DOTA
Python命名空间详解
2014/08/18 Python
详尽讲述用Python的Django框架测试驱动开发的教程
2015/04/22 Python
Python修改MP3文件的方法
2015/06/15 Python
Python实现PS图像明亮度调整效果示例
2018/01/23 Python
Python反转序列的方法实例分析
2018/03/21 Python
python中返回矩阵的行列方法
2018/04/04 Python
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
numpy.where() 用法详解
2019/05/27 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
HTML5在IE10、火狐下中文乱码问题的解决方法
2013/11/18 HTML / CSS
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
给朋友的道歉信
2014/01/09 职场文书
电影雨中的树观后感
2015/06/15 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书
vue基于Teleport实现Modal组件
2021/05/31 Vue.js
Python+Selenium实现读取网易邮箱验证码
2022/03/13 Python