首页 文章

$ http的Vue资源问题 - 未捕获的TypeError：无法读取未定义的属性'post'

提问于
浏览 次
1

我是Vue的新手，我在Laravel 5.3项目中使用它 .

在我的app.js文件中，我有以下内容

require('./bootstrap');

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

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

然后在我的bootstrap文件中

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（）给我错误

未捕获的TypeError：无法读取未定义的属性“post”

我认为这是加载vue-resource的一个问题 .

我已经检查过我的 package.json 文件有 vue-resource 并且我已经通过npm安装了它，但仍然存在相同的问题 .

任何帮助或想法将不胜感激 .

php laravel-5 vue-resource

1 回答

  • 4

    好的问题是脚本部分中的CheckoutForm.vue文件 - 在 created() method token:function(token){} this 中没有引用 Vue 实例，因此 this.$http 未定义 .

    将其更改为使用下面代码中修改的ES2015箭头语法，然后您不应将 this.$http 视为未定义 .

    或者您需要在 created() 中的令牌的匿名函数中绑定 this .

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

  }

};
    回复于

相关问题