使用 Axios 和 Vue 在 Laravel 中发送数据

Question

我一直在关注 Laracasts 的 Stripe 集成教程，我发现自 Laravel 5.4 发布以来发生了很多变化。我仍然能够找到自己的路，但我在尝试使用 Vue 和 Axios 提交付款表格时遇到了麻烦。

正在从数据库中检索产品并显示在 select 下拉列表中 - 这有效。我的问题是数据没有正确发送到 PurchasesController 中的存储函数。当我尝试购买时，表单模态显示正常，我用适当的测试数据填写并提交，但在 Chrome 检查员中我可以看到 /purchases returns 出现 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';
    }
}

我意识到产品没有传递到上面的 /purchases 所以我试过这个：

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

不幸的是，即使如此，我仍然得到相同的模型 [App\Product] 没有查询结果错误。我可以使用 another/better 方式从 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 实例吗？您可能需要在 .post(...) 调用中手动调用 .bind(this) 来绑定它。

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

使用 Axios 和 Vue 在 Laravel 中发送数据

Sending data in Laravel using Axios & Vue

javascript

laravel

vue.js

axios