未捕获的类型错误：无法读取未定义的 VueJS 的属性“帖子”

Question

在 Laravel 5.4 中，我尝试使用 Stripe 进行付款。我正在关注 laracast 上的视频，如果您有帐户，可以在此处观看视频： https://laracasts.com/series/how-to-accept-payments-with-stripe/episodes/3

我对其进行了更改以满足我的需要，并且他所做的某些事情不适用于 vue 0.3 版，除了这个问题之外我能够修复。

我有这个代码：

data: function data() {
  return {
     stripeEmail: '',
     stripeToken: ''
  };
},
created: function created() {

  this.stripe = StripeCheckout.configure({

    key: "my_key",
    image: "https://stripe.com/img/documentation/checkout/marketplace.png",
    locale: "auto",
    token: (token) => {
      this.stripeToken = token.id;
      this.stripeEmail = token.email;

      this.$http.post('/payment', this.$data).then(response => alert('Message'));
    }
  });
},


methods: {
  buy: function buy() {
    this.stripe.open({
      name: "One Month Subscription",
      description: "Having your business displayed for one month.",
      zipcode: true,
      amount: 1000

    });
  }
}

我可以输入信息，但是一旦我点击提交，它就会返回错误：

Uncaught TypeError: Cannot read property 'post' of undefined

我在这里的 bootstrap.js 中安装了 vue-resource：

window.Vue = require('vue');
require('vue-resource');

这解决了 $http 问题，但现在我遇到了 post 问题。

如果您需要任何其他信息，请告诉我。

Answer 1

我认为this 可能有问题。具体来说，created 中的this 可能与token 中的this 不同。试试……这个：

created: function created() {
  var self = this;

  self.stripe = StripeCheckout.configure({
    key: "my_key",
    image: "https://stripe.com/img/documentation/checkout/marketplace.png",
    locale: "auto",
    token: (token) => {
      self.stripeToken = token.id;
      self.stripeEmail = token.email;

      self.$http.post('/payment', self.$data).then(response => alert('Message'));
    }
  });
},

我知道您正在使用箭头函数，所以不应该是这种情况，但无论如何我都会尝试一下，看看效果如何。