在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標簽分別綁定了三個不同的方法。