博客

场景：

在vue中有时候用v-for的时候元素上可能加上了事件，并且把事件名抽出去写法可能会更装简单，如下：

对下面三行文字要绑定上事件

1.想当然直接写法

    <div>
      <h3 v-for="item in testList" :key="item.id" v-text="item.title" @click="item.eventName"></h3>
    </div>

data(){
	return{
		testList:[
        {id:1,title:'测试一',eventName:'testConsole'},
        {id:2,title:'测试二',eventName:'testConsole'},
        {id:3,title:'测试三',eventName:'testConsole'},
      ]
	}
}
methods:{
	testConsole(){
      console.log('0000')
    }
}

当然写法点击的时候却报错，如下：

2.解决方案如下：

    <div>
      <h3 v-for="item in testList" :key="item.id" v-text="item.title" @click="callFn(item.eventName)"></h3>
    </div>

methods:{
	callFn(item){
      this[item].apply(this)
    },
    testConsole(){
      console.log('0000')
    }
}

效果：

3.如果想对事件进行传参也是可以的，比如我把id传到事件里面去

    <div>
      <h3 v-for="item in testList" :key="item.id" v-text="item.title" @click="callFn(item.eventName,item.id)"></h3>
    </div>

methods:{
	callFn(item,id){
      this[item].apply(this,[id]); // 第二个参数必须为数组格式，apply用法
    },
    testConsole(id){
      console.log('0000id='+id)
    }
}

效果：