Uncaught TypeError: невозможно прочитать свойство «post» неопределенного VueJS

В Laravel 5.4 я пытаюсь произвести оплату с помощью Stripe. Я слежу за видео на laracast, если у вас есть учетная запись, вы можете посмотреть видео здесь: https://laracasts.com/series/how-to-accept-payments-with-stripe/episodes/3

Я изменил его, чтобы он соответствовал моим потребностям, и есть кое-что, что он делает, что не работает с версией 0.3 vue, что я смог исправить, за исключением этой проблемы.

У меня есть этот код:

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

Я установил vue-resource в свой bootstrap.js здесь:

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

Это решило проблему с $http, но теперь я получаю проблему с почтой.

Если есть какая-либо другая информация, которая вам нужна, дайте мне знать.


stripe-payments vuejs2 laravel-5.4
person Michael Frio    schedule 29.03.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я думаю, что может быть проблема с this. В частности, this в created, скорее всего, не совпадает с this в token. Попробуй это:

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'));
    }
  });
},

Я знаю, что вы используете функции стрелок, так что это не должно иметь место, но я бы все равно попробовал и посмотрел, как это работает.

person floatingLomas    schedule 29.03.2017
comment
Вы добавили несколько операторов отладки console.log(), чтобы понять, почему? Каково значение self.$http? Это то, что вам нужно будет сделать для отладки; здесь, к сожалению, вряд ли будет очевидный ответ. - person floatingLomas; 04.04.2017