vue中v-on的参数问题
2017-02-24 17:24
106 查看
vue中v-on:clock的使用
最近在学习vue.js框架。记下其中遇到的一些问题,以便以后查阅。首先,这是一个页面(为了便于观察,将各个标签都一一着色):
其中html代码:
<div class="groupbody "> <ul class="list "> <li v-for="cell in todo.groupbody " class="pagegroupcell " v-on:click="exchange($event)"> <div class="pagecelltext ">{{ cell.left }}</div> <div class="pagecellmin">{{ cell.min }}</div> <img src="img/images/direction/right.png" style="width: 20px;height: 30px;float: right;margin-top: 5px;"> <div class="pagecellmsg ">{{ cell.right }}</div> </li> </ul> <div class="clear "></div> </div>
js部分的代码:
exchange: function (event) { alert("开始执行方法"); var a = event.target; var cellimg = a.getElementsByTagName("div")[0]; var msg = cellimg.innerText; page2datas.todos[0].groupheader = msg; alert("方法执行中"); var b = document.getElementById("page1"); b.style.display = "none"; var c = document.getElementById("page2"); c.style.display = "block"; alert("方法执行结束"); }
这时候如果点击cell中有颜色的区域(即点击li标签的字标签的时候),只有第一个alert( )方法执行,而后面的两个方法并不执行。
原因就是这个方法的参数event:
如果标签绑定的方法中有参数$event,这时候就可以利用event.target,获取到当前点被绑定这个点击事件的标签。
但是这个参数也可能会造成一些问题,比如如果想不论点击li标签的哪一个部分都要把点击事件的方法执行完整,这时候参数event就不适用了。这时候只能另想其他办法。
解决方法:
在li中有v-for循环,其中有一个cell对象,这个对象居居士li标签中的数据。只需要把这个对象传递给点击事件的方法,就可以通过这个对象去实现刚才想要达到的目的。
修改之后的html代码:
<div class="groupbody "> <ul class="list "> <li v-for="cell in todo.groupbody " class="pagegroupcell " v-on:click="exchange(cell)"> <div class="pagecelltext ">{{ cell.left }}</div> <div class="pagecellmin">{{ cell.min }}</div> <img src="img/images/direction/right.png" style="width: 20px;height: 30px;float: right;margin-top: 5px;"> <div class="pagecellmsg ">{{ cell.right }}</div> </li> </ul> <div class="clear ">< a647 /span></div> </div>
修改之后的js代码:
exchange: function (cell) { alert("开始执行方法"); page2datas.todos[0].groupheader =cell.left; alert("执行中"); var b = document.getElementById("page1"); b.style.display = "none"; var c = document.getElementById("page2"); c.style.display = "block"; alert("方法执行结束"); }
这时候,整个电击事件的执行方法都可以完整执行下来,后续页面的切换也可以完成。
相关文章推荐
- vue post 参数 springmvc不识别问题
- vue页面刷新或者后退参数丢失的问题
- vue路由只变化参数页面组件不更新问题
- 浅谈针对Vue相同路由不同参数的刷新问题
- 解决vue页面刷新或者后退参数丢失的问题
- vue-router路由参数刷新消失的问题解决方法
- django 2.0 添加外键后,迁移数据库的提示缺少参数on_delete问题
- 关于onActivityResult方法接收不到传递参数的问题
- vue.js用vue-router路由传参时页面刷新后参数消失的问题
- 基于vue 添加axios组件,解决post传参数为null的问题
- 解决vue-router在同一个路由下切换,取不到变化的路由参数问题
- vue.js中v-on:textInput无法执行事件问题的解决过程
- Spring FeignClient 遇到的参数问题(RequestParam.value() was empty on parameter 0)
- Vue 使用axios 发送post请求,参数格式有错误问题
- vue刷新页面带的参数丢失问题
- 详解解决Vue相同路由参数不同不会刷新的问题
- vue-router2路由参数注意问题
- 浅谈vue-router2路由参数注意的问题
- 前后端分离的j2ee的web项目,使用vue方式,即{{}}方式批量传入前端参数,遇到一个一个问题,页面上一开始有{{}},怎么处理?
- vue 添加axios组件,解决post传参数为null问题