在vue项目中，通过v-for循环，动态添加后台返回的事件[转载]

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

　　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标签分别绑定了三个不同的方法。