在vue项目中,通过v-for循环,动态添加后台返回的事件

2018/04/04 10:58
阅读数 49

一.现有一种业务需求,前端的某个元素添加点击事件,但事件是后台返回的(不确定),需要动态添加,下面是具体思路:

  1.假定后台返回数据为如下格式:    

list: [
{
name: '李寻欢',
kungFu: '小李飞刀',
method: "foo('林诗音')"
}, {
name: '楚留香',
kungFu: '踏雪无痕',
method: "foo1('夜姬')"
}, {
name: '陆小凤',
kungFu: '灵犀一指',
method: "foo2('花满楼')"
}
]
2.需要先对这个数组进行一下处理
this.list.map(item => {
const reg1 = /^\w+/g;
const reg2 = /\(([^)]+)\)/
item.fn = item.method.match(reg1)[0]
item.args = item.method.match(reg2)[1]
}),该部操作是将一个字符串的方法,类似于"foo('bar')",解析成:foo函数名和bar参数;
3.HTML文本中为如下代码:
<ul v-for="item,index in list">
<li @click="callFn(item)">{{item.name}}</li>
</ul>,绑定方法为callFn(item),在methods中定义如下:
callFn(item) {
this[item.fn].apply(this, item.args.split(','));
},这样就可以将后台返回的方法在callFn中进行调用;
4.假设后台方法为:
foo(arg) {
console.log('==========', arg);
},
foo1(arg) {
console.log('++++++++++', arg);
},
foo2(arg) {
console.log('>>>>>>>>>>', arg);
},则前端渲染渲染的三个li标签分别绑定了三个不同的方法。
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部