Vue中在支付API回调内调用组件方法报错：Uncaught TypeError: this.registerPayment is not a function

这是JavaScript里非常常见的上下文绑定问题！你遇到的Uncaught TypeError: this.registerPayment is not a function错误，核心原因是回调函数里的this没有指向Vue组件实例——当用普通function定义回调时，this会指向该函数自身的执行上下文，而非你的组件，自然找不到组件上的registerPayment方法。

下面给你三个可行的解决办法，按推荐程度排序：

1. 使用箭头函数（最简洁推荐） #

箭头函数不会创建自己的this，它会继承外层作用域的this（也就是你的Vue组件实例）。只需要把回调改成箭头函数即可：

async makePayment() {
  this.$launchFlutterwave({
    tx_ref: Date.now(),
    amount: this.amount,
    currency: "KES",
    customer: {
      email: "user@gmail.com",
      phonenumber: this.user.phone_number,
      name: this.user.name,
      plot_unique_id: this.plot_unique_id
    },
    // 替换为箭头函数
    callback: (data) => {
      console.log(data);
      this.registerPayment(data); // 此时this指向组件实例
    },
    customizations: {
      title: "",
      description: "",
      logo: "https://assets.piedpiper.com/logo.png"
    }
  });
},
async registerPayment(data) {
  console.log("hit");
  await axios.post("/api/flutterwave/register/payment", data);
}

2. 提前保存组件的this到变量 #

在调用$launchFlutterwave之前，把组件的this存到一个变量（比如vm）里，回调里用这个变量访问组件方法：

async makePayment() {
  const vm = this; // 保存组件实例的this
  this.$launchFlutterwave({
    tx_ref: Date.now(),
    amount: this.amount,
    currency: "KES",
    customer: {
      email: "user@gmail.com",
      phonenumber: this.user.phone_number,
      name: this.user.name,
      plot_unique_id: this.plot_unique_id
    },
    callback: function(data) {
      console.log(data);
      vm.registerPayment(data); // 用vm代替this
    },
    customizations: {
      title: "",
      description: "",
      logo: "https://assets.piedpiper.com/logo.png"
    }
  });
},
async registerPayment(data) {
  console.log("hit");
  await axios.post("/api/flutterwave/register/payment", data);
}

3. 使用bind绑定this #

通过bind方法把回调函数的this强制绑定到组件实例：

async makePayment() {
  this.$launchFlutterwave({
    tx_ref: Date.now(),
    amount: this.amount,
    currency: "KES",
    customer: {
      email: "user@gmail.com",
      phonenumber: this.user.phone_number,
      name: this.user.name,
      plot_unique_id: this.plot_unique_id
    },
    callback: function(data) {
      console.log(data);
      this.registerPayment(data);
    }.bind(this), // 绑定组件的this到该函数
    customizations: {
      title: "",
      description: "",
      logo: "https://assets.piedpiper.com/logo.png"
    }
  });
},
async registerPayment(data) {
  console.log("hit");
  await axios.post("/api/flutterwave/register/payment", data);
}

这三种方法都能解决问题，其中箭头函数的写法最简洁，也是Vue项目中处理这类上下文问题的常规做法。

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