Ошибка Vue-ресурса с $ http — Uncaught TypeError: Невозможно прочитать свойство ‘post’ из неопределенного

Я новичок в Vue и использую его в проекте Laravel 5.3.

в моем файле app.js у меня есть следующее

require('./bootstrap');

Vue.component('CheckoutForm', require('./components/CheckoutForm.vue'));

const app = new Vue({
el: '#app'
});

Тогда в моем файле начальной загрузки у меня есть

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

Vue.http.interceptors.push((request, next) => {
request.headers.set('X-CSRF-TOKEN', admin.csrfToken);

next();
});

В моем файле CheckoutForm.vue у меня есть шаблон и js следующим образом:

<template>
<form class="form-horizontal" role="form" method="POST"     action="payments/checkout">
<input type="hidden" name="stripeToken" v-model="stripeToken" />
<input type="hidden" name="stripeEmail" v-model="stripeEmail" />

<div class="form-group">
<div class="col-md-8">
<label> Select New Plan</label>
<select name="plan" v-model="plan" class="form-control col-md-8" >
<option v-for="plan in plans" :value="plan.id">
{{ plan.name }} - ${{ plan.price / 100}}
</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-8">
<button type="submit" class="btn btn-primary" @click.prevent="buy">Proceed to Payment</button>
<a class="btn btn-default" href="/myaccount">Continue as Trial</a>
</div>
</div>

<script>
export default {

props: ['plans'],
data() {
return{
stripeEmail: '',
stripeToken: '',
plan: 3,
status: false
};
},

created(){
this.stripe = StripeCheckout.configure({
key: admin.stripeKey,
image: "https://stripe.com/img/documentation/checkout/marketplace.png",
locale: "auto",
panelLabel: "Subscribe for: ",
email: admin.user.email,
token: function(token){
this.stripeEmail = token.email;
this.stripeToken = token.id;

//this.$el.submit();
this.$http.post('payments/checkout', this.$data)
.then(
response => alert('Thank you for your purchase!.'),
response => this.status = response.body.status
);

}
});
},

methods: {

buy(){

let plan = this.findPlanById(this.plan);

this.stripe.open({
name: plan.name,
description: plan.description,
zipCode: true,
amount: plan.price
});
},

findPlanById(id){
return this.plans.find(plan => plan.id == id);
}

}

};

У меня проблема в том, что мой вызов для отправки формы с этим. $ Http.post () дает мне ошибку

Uncaught TypeError: Невозможно прочитать свойство ‘post’ из неопределенного

И я думаю, что это проблема с загрузкой vue-ресурса.

Я проверил, что мой package.json файл имеет vue-resource и я установил его через npm, но все еще та же проблема присутствует.

Любая помощь или идеи будут оценены.

1

Решение

Хорошо, проблема в вашем файле CheckoutForm.vue в части скрипта — в created() method token:function(token){} этот не ссылается на Vue пример отсюда this.$http не определено

Измените его, чтобы использовать синтаксис стрелки ES2015, как показано в коде ниже, поэтому вы не должны получать this.$http как неопределено.

Или вам нужно связать this в анонимной функции для токена в created(),

<script>
export default {

props: ['plans'],
data() {
return{
stripeEmail: '',
stripeToken: '',
plan: 3,
status: false
};
},

created(){
this.stripe = StripeCheckout.configure({
key: admin.stripeKey,
image: "https://stripe.com/img/documentation/checkout/marketplace.png",
locale: "auto",
panelLabel: "Subscribe for: ",
email: admin.user.email,
//here you are using function(token) within it the `this` will not reference the Vue instance, hence this.$http is undefined.
//token: function(token){
//so change it to use the ES2015 arrow syntax
token:(token) => {
this.stripeEmail = token.email;
this.stripeToken = token.id;

//this.$el.submit();
this.$http.post('payments/checkout', this.$data)
.then(
response => alert('Thank you for your purchase!.'),
response => this.status = response.body.status
);

}
});
},

methods: {

buy(){

let plan = this.findPlanById(this.plan);

this.stripe.open({
name: plan.name,
description: plan.description,
zipCode: true,
amount: plan.price
});
},

findPlanById(id){
return this.plans.find(plan => plan.id == id);
}

}

};
4

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]