VUE v-for中 动态绑定事件方法
今天做了一个菜单权限的功能,需要根据后台返回的菜单内容在前台用VUE展示,并且点击不同菜单按钮可以进入到不同的页面,所以这里要动态绑定不同的事件方法一开始尝试过在v-on:click里直接写方法名的形式,发现不起作用(错误示范)<van-grid:column-num="3"><van-grid-itemv-for="item in menuList":key="item.men
·
今天做了一个菜单权限的功能,需要根据后台返回的菜单内容在前台用VUE展示,并且点击不同菜单按钮可以进入到不同的页面,所以这里要动态绑定不同的事件方法
一开始尝试过在v-on:click里直接写方法名的形式,发现不起作用(错误示范)
<van-grid
:column-num="3">
<van-grid-item
v-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-item
v-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);
},
},
更多推荐
已为社区贡献2条内容
所有评论(0)