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 相关文章推荐
执行iframe中的javascript方法
Oct 07 Javascript
javascript各浏览器中option元素的表现差异
Apr 07 Javascript
Javascript判断图片尺寸大小实例分析
Jun 16 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 Javascript
JavaScript 字符串常用操作小结(非常实用)
Nov 30 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 Javascript
jQuery 改变P标签文本值方法
Feb 24 jQuery
解决vue移动端适配问题
Dec 12 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
Feb 26 Javascript
写给新手同学的vuex快速上手指北小结
Apr 14 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
jQuery 源码分析笔记
2011/05/25 PHP
美图秀秀web开放平台--PHP流式上传和表单上传示例分享
2014/06/22 PHP
PHP实现Soap通讯的方法
2014/11/03 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
Javascript实现计算个人所得税
2015/05/10 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
2016/09/17 Javascript
Bootstrap CSS组件之导航条(navbar)
2016/12/17 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
微信小程序网络封装(简单高效)
2018/08/06 Javascript
浅谈react性能优化的方法
2018/09/05 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
序列化模块json代码实例详解
2020/03/03 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
Python while、for、生成器、列表推导等语句的执行效率测试
2015/06/03 Python
在Django中同时使用多个配置文件的方法
2015/07/22 Python
使用Python操作excel文件的实例代码
2017/10/15 Python
python将list转为matrix的方法
2018/12/12 Python
解决Python设置函数调用超时,进程卡住的问题
2019/08/08 Python
python Selenium 库的使用技巧
2020/10/16 Python
python+opencv实现车道线检测
2021/02/19 Python
SEPHORA新西兰官方网站:购买化妆品和护肤品
2016/12/02 全球购物
大学生个人简历中的自我评价
2013/12/27 职场文书
护士进修自我鉴定
2014/02/07 职场文书
服务标语大全
2014/06/18 职场文书
2014预备党员批评与自我批评思想汇报
2014/09/20 职场文书
网站出售协议书范文
2014/10/10 职场文书
安全先进班组材料
2014/12/26 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书
学子宴致辞大全
2015/07/27 职场文书
用 Python 元类的特性实现 ORM 框架
2021/05/19 Python
Python 键盘事件详解
2021/11/11 Python
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python