【vue项目】for循环中的按钮click点击报错

代码如下：

<template>
  <div class="hello">
      <button @click="msgShow1">我可以</button>

      <p>都是绑定msgShow事件，点击上面的按钮可以，但是点击下面的按钮报错：</p>
      <button v-for="(item,index) in btnsDate" 
      :key="index" 
      @click="item.fun">{{item.name}}</button>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data(){
　　return {
　　　　btnsDate:[
　　　　　　{id:12001,name:"点击按钮1",fun:"msgShow"},
　　　　　　{id:12002,name:"点击按钮2",fun:"msgShow"},
　　　　　　{id:12003,name:"点击按钮3",fun:"msgShow"}]
　　}
  },
  methods:{　　
      msgShow:function(){
        alert("asdasd");
      }
  }
}
</script>

报错1：
[Vue warn]: Error in v-on handler: "TypeError: handler.apply is not a function"

报错2：
TypeError: handler.apply is not a function

请大牛告知原因~

data里面你的item.fun定义的是属性值而不是方法呀，老铁！属性值绑在click事件上不会有效果，而会报错。

直接引用不香吗？那是变量，data跟methods不要弄混了

<template>
  <div class="hello">
      <button @click="msgShow1">我可以</button>

      <p>都是绑定msgShow事件，点击上面的按钮可以，但是点击下面的按钮报错：</p>
      <button v-for="(item,index) in btnsDate" 
      :key="index" 
      @click="msgShow(item, index)">{{item.name}}</button>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data(){
　　return {
　　　　btnsDate:[
　　　　　　{id:12001,name:"点击按钮1"},
　　　　　　{id:12002,name:"点击按钮2"},
　　　　　　{id:12003,name:"点击按钮3"}]
　　}
  },
  methods:{
        msgShow1 () {
            alert('我可以')
        },
      msgShow(obj, inx){
        alert(obj + '' +inx )
      }
  }
}
</script>

你应该要的是这样的！请采纳，关注哦