VUE v-for中动态绑定事件方法

今天做了一个菜单权限的功能，需要根据后台返回的菜单内容在前台用VUE展示，并且点击不同菜单按钮可以进入到不同的页面，所以这里要动态绑定不同的事件方法

一开始尝试过在v-on:click里直接写方法名的形式，发现不起作用（错误示范）

     <van-grid:column-num="3"><van-grid-itemv-for="item in menuList":key="item.menuid":icon="item.menuimg":text="item.menuname"v-on:click="item.methodName"></van-grid-item></van-grid>

于是想到以下写法

VUE部分：这里使用v-on:click的方式来动态绑定事件

     <van-grid:column-num="3"><van-grid-itemv-for="item in menuList":key="item.menuid":icon="item.menuimg":text="item.menuname"v-on:click="turnPage(item.methodName)"></van-grid-item></van-grid>

script部分：在方法里根据用this[方法名]()的方式动态传参去调不同的方法从而实现动态绑定事件不同的方法

methods: {turnPage(methodName) {console.log(methodName);this[methodName]();},dataInspectHomepage() {dataInspectHomepage(this);},pointCheckHomepage() {pointCheckHomepage(this);},repairOrderHomePage() {repairOrderHomePage(this);},},

VUE v-for中动态绑定事件方法相关推荐

在vue的templete中使用js方法时踩坑
1.在templete中使用三元表达式控制执行不同的方法加括号才可以正常执行原因是: 在vue的click事件中,如果使用三元表达式,则他会判断如果你写的是函数不做处理,所以可以正常执行方法: 但 ...
Vue或uniapp 中动态绑定背景图片（三种情况）
Vue 中动态绑定背景图片(三种情况)_MrQiuGH的博客-CSDN博客_vue 动态背景图
2种js动态绑定事件方法
1.使用原生JS动态为动态创建的对象绑定事件 1-1.创建一个function,用来兼容IE8以下浏览器添加事件 function addEvent( el, type, fun) { if ( el ...
js动态绑定事件方法
1.给对象绑定事件 var t = document.getElementById("tab1"); t.onclick = function tst(){ alert(''); ...
埋坑一： vue中子组件调用兄弟组件方法
小计: 开发中遇到子组件需要调用兄弟组件中的方法,如下写个小demo记录下心得,如果你有好的方法,请到评论区域指教父组件示例代码: 组件功能解析: 通过$emit获取子组件事件,通过$ref调用子组 ...
vue中展示列表，类似formatter方法及在vue中点击页面信息事件
后台返回文件路径及文件名,前端展示只需要展示文件名,在Easyui中使用formatter方法很轻松就实现了,在vue中,需要使用过滤方式: formatterfj方法为截取字符串返回文件名该方法应 ...
【IOC 控制反转】Android 事件依赖注入 ( 事件依赖注入具体的操作细节 | 获取 Activity 中的所有方法 | 获取方法上的注解 | 获取注解上的注解 | 通过注解属性获取事件信息 )
文章目录前言一.获取 Activity 中的所有方法二.获取方法上的注解三.获取注解上的注解四.通过注解属性获取相关事件信息前言 Android 依赖注入的核心就是通过反射获取类 / 方 ...
「后端小伙伴来学前端了」Vue中全局事件总线（GlobalEventBus）原理及探究过程
前言上一篇文章写了 Vue 中的自定义事件,自定义事件是全局事件总线基础.我在上一篇文章中埋下了一个小小的伏笔.如下图: 我说过,在Vue中如果我们用(@orv-on)给组件绑定上一个自定义事件,其 ...
keep alive PHP,vue中keep-alive使用方法详解
这次给大家带来vue中keep-alive使用方法详解,vue中keep-alive使用的注意事项有哪些,下面就是实战案例,一起来看一下. 1.keep-alive的作用以及好处在做电商有关的项目中 ...

VUE v-for中动态绑定事件方法

VUE v-for中动态绑定事件方法相关推荐

最新文章

热门文章

VUE v-for中 动态绑定事件方法

VUE v-for中 动态绑定事件方法相关推荐

最新文章

热门文章

VUE v-for中动态绑定事件方法

VUE v-for中动态绑定事件方法相关推荐