this 为什么是null

Question

VUE 中，下面代码addBt添加按钮，click之后为什么this是null

<el-button type="primary" v-for="xx in arr" @click="xx.click">主要按钮</el-button>
    <el-button  @click="addBtn">add</el-button>
    
    
    
    
addBtn(){
  let ids =  this.arr.length;
  let xx ={
    name:"xxxx",
    ids:ids,
    click:function () {
      alert(this.ids + this.name)
    }
  }
  this.arr.push(xx)
},

Answer 1

<el-button type="primary" v-for="xx in arr" @click="xx.click">主要按钮</el-button>
    <el-button  @click="addBtn">add</el-button>
    
    
    
click(xx) {
    console.log(xx.name, xx.ids)
}
addBtn(){
  let ids =  this.arr.length;
  let xx = {
    name: `xxxx_${ids}`,
    ids: ids
  }
  
  xx.click = this.click.bind(this, xx)

  this.arr.push(xx)
},

Answer 2

你这个写法是真的厉害

Answer 3

click应该用箭头函数写吧

Answer 4

因为click是函数实参，函数作为实参是不会将this带过去的，要带过去要么使用lambda要么bind。