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 相关文章推荐
javascript检查日期格式的函数[比较全]
Oct 17 Javascript
jQuery帮助之筛选查找 children([expr])
Jan 31 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 Javascript
jQuery中delegate()方法用法实例
Jan 19 Javascript
JQuery点击行tr实现checkBox选中的简单实例
May 26 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
Apr 11 Javascript
基于模板引擎Jade的应用(详解)
Dec 12 Javascript
使用node.js实现微信小程序实时聊天功能
Aug 13 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
Jan 27 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 Javascript
React中使用UMEditor的方法示例
Dec 27 Javascript
jQuery+ajax实现用户登录验证
Sep 13 jQuery
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实现的浏览器检查类
2016/04/11 PHP
php之header的不同用法总结(实例讲解)
2017/11/28 PHP
javascript+iframe 实现无刷新载入整页的代码
2010/03/17 Javascript
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
学习JavaScript设计模式(接口)
2015/11/26 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
微信JS接口大全
2016/08/25 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
2016/12/01 Javascript
JS声明式函数与赋值式函数实例分析
2016/12/13 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
vue-drawer-layout实现手势滑出菜单栏
2020/11/19 Vue.js
[47:35]VP vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
python生成式的send()方法(详解)
2017/05/08 Python
Python比较2个时间大小的实现方法
2018/04/10 Python
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
搞定这套Python爬虫面试题(面试会so easy)
2019/04/03 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
python3.x提取中文的正则表达式示例代码
2019/07/23 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
介绍一下Linux文件的记录形式
2013/09/29 面试题
金融行业职业生涯规划范文
2014/01/17 职场文书
拾金不昧锦旗标语
2014/06/27 职场文书
村长党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
迁户口计划生育证明
2014/10/19 职场文书
2014年维修工作总结
2014/11/22 职场文书
先进个人申报材料
2014/12/30 职场文书
教师党员自我评价2015
2015/03/04 职场文书
go结构体嵌套的切片数组操作
2021/04/28 Golang
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js