Question

我一直在关注Laracasts的Stripe集成教程，自从Laravel 5.4发布以来，我发现很多事情都发生了变化。我仍然能够找到自己的方式，但是我试图使用Vue和Axios提交付款表单。

正在从数据库中检索产品并在选择下拉列表中显示 - 这是有效的。我的问题是数据未正确发送到PurchasesController中的商店功能。当我尝试购买时，表单模式显示正常，我用相应的测试数据填写并提交，但在Chrome检查员中我可以看到/件购买返回404错误，当我检查网络选项卡时错误是：没有模型[App \ Product]

的查询结果

这是原始的Vue代码：

<template>
    <form action="/purchases" method="POST">

        <input type="hidden" name="stripeToken" v-model="stripeToken">
        <input type="hidden" name="stripeEmail" v-model="stripeEmail">

        <select name="product" v-model="product">
            <option v-for="product in products" :value="product.id">
                {{ product.name }} &mdash; ${{ product.price /100 }}
            </option>
        </select>

        <button type="submit" @click.prevent="buy">Buy Book</button>

    </form>
</template>

<script>
    export default {
        props: ['products'],
        data() {
            return {
                stripeEmail: '',
                stripeToken: '',
                product: 1
            };
        },
        created(){
            this.stripe = StripeCheckout.configure({
                key: Laravel.stripeKey,
                image: "https://stripe.com/img/documentation/checkout/marketplace.png",
                locale: "auto",
                token: function(token){

                    axios.post('/purchases', {
                        stripeToken:  token.id,
                        stripeEmail: token.email
                      })
                      .then(function (response) {
                        alert('Complete! Thanks for your payment!');
                      })
                      .catch(function (error) {
                        console.log(error);
                      });

                }
            });
        },
        methods: {
            buy(){
                let product = this.findProductById(this.product);

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

            findProductById(id){
                return this.products.find(product => product.id == id);
            }
        }
    }
</script>

和我的PurchasesController。

<?php

namespace App\Http\Controllers;

use Log;
use App\Product;
use Illuminate\Http\Request;
use Stripe\{Charge, Customer};

class PurchasesController extends Controller
{
    public function store()
    {

        Log::info("Product Info: " . request('product'));
        Log::info("Stripe Email: " . request('stripeEmail'));
        Log::info("Stripe Token: " . request('stripeToken'));

        $product = Product::findOrFail(request('product'));

        $customer = Customer::create([
            'email' => request('stripeEmail'),
            'source' => request('stripeToken')
        ]);

        Charge::create([
            'customer' => $customer->id,
            'amount' => $product->price,
            'currency' => 'aud'
        ]);

        return 'All done';
    }
}

我意识到产品没有通过/购买上面所以我试过这个：

axios.post('/purchases', {
    stripeToken:  token.id,
    stripeEmail: token.email,
    product: this.product
})

不幸的是，我仍然得到相同的模型[App \ Product]错误的查询结果，即使这样。有没有其他/更好的方法从Vue / Axios传递数据，而我可以使用？如果有人能够提供帮助，我将不胜感激。

提前谢谢。

修改解决方案是将this重新设定为新变量，然后再次开始运行。以下是对我有用的Vue代码的相关部分：

created(){
    let module = this; // cast to separate variable
    this.stripe = StripeCheckout.configure({
        key: Laravel.stripeKey,
        image: "https://stripe.com/img/documentation/checkout/marketplace.png",
        locale: "auto",
        token: function(token){

            axios.post('/purchases', {
                stripeToken:  token.id,
                stripeEmail: token.email,
                product: module.product
              })
              .then(function (response) {
                alert('Complete! Thanks for your payment!');
              })
              .catch(function (error) {
                console.log(error);
              });

        }
    });
},

Answer 1

您确定将产品ID分配给数据（使用product: this.product）时，this关键字确实是您的Vue实例吗？您可能需要在.bind(this)电话上调用.post(...)手动绑定它。

请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

使用Axios＆amp; amp;在Laravel中发送数据Vue的

1 个答案: