Vue.js提交表单前调用折扣函数报错：无法读取applyDiscount

报错原因很明确：forEach 里的普通函数会改变 this 的指向，此时函数内部的 this 不再指向 Vue 组件实例，所以找不到 applyDiscount 方法。

给你三种可行的解决方式：

方式一：使用箭头函数（推荐） #

箭头函数不会绑定自身的 this，会继承外部作用域的 this（也就是 submit 方法里的 Vue 实例），代码修改如下：

submit() {
  this.campaign.items.forEach(item => {
      // 记得把计算后的折扣价赋值回item.price，否则原数据不会更新
      item.price = this.applyDiscount(item.price)
  })
  var data = new FormData()
  // 后续Axios提交逻辑
}

方式二：提前保存外部的this #

把组件实例的 this 存到一个变量里，在 forEach 回调里用这个变量调用方法：

submit() {
  const that = this
  this.campaign.items.forEach(function(item) {
      item.price = that.applyDiscount(item.price)
  })
  var data = new FormData()
  // 后续Axios提交逻辑
}

方式三：利用forEach的第二个参数绑定this #

forEach 支持第二个参数，用来指定回调函数内部的 this 指向：

submit() {
  this.campaign.items.forEach(function(item) {
      item.price = this.applyDiscount(item.price)
  }, this) // 这里传入组件实例的this，绑定回调里的this指向
  var data = new FormData()
  // 后续Axios提交逻辑
}

另外注意：你原来的代码只调用了 applyDiscount 方法，但没有把计算结果赋值给 item.price，这样原数据不会有变化，提交时还是原价，一定要补上赋值操作。

内容的提问来源于stack exchange，提问作者Gibson