使用 Axios 和 Vue 在 Laravel 中发送数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43697502/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sending data in Laravel using Axios & Vue
提问by Redback87
I have been following the Stripe integration tutorial by Laracasts and it's become apparent to me that a lot has changed since Laravel 5.4 was released. I have been able to still find my way along but I have hit a bump trying to submit a payment form using Vue and Axios.
我一直在关注 Laracasts 的 Stripe 集成教程，很明显自从 Laravel 5.4 发布以来发生了很多变化。我仍然能够找到自己的方式，但在尝试使用 Vue 和 Axios 提交付款表格时遇到了障碍。
The product is being retrieved from a database and displayed in a select dropdown - this works. My issue is the data is not being properly sent to the store function in the PurchasesController. When I try to make a purchase the form modal appears fine, I fill it out with the appropriate test data and submit it, but in Chrome inspector I can see that /purchases returns a 404 error and when I check the network tab the error is: No query results for model [App\Product]
正在从数据库中检索产品并显示在选择下拉列表中 - 这有效。我的问题是数据没有正确发送到 PurchasesController 中的商店功能。当我尝试购买时，表单模式看起来很好，我用适当的测试数据填写并提交它，但在 Chrome 检查器中，我可以看到 /purchases 返回 404 错误，当我检查网络选项卡时，错误是: 没有模型 [App\Product] 的查询结果
Here is the original Vue code:
这是原始的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 }} — ${{ 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>
And my PurchasesController.
还有我的 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';
}
}
I realise that product isn't being passed through to /purchases above so I have tried this:
我意识到产品没有被传递到上面的 /purchases 所以我试过这个：
axios.post('/purchases', {
stripeToken: token.id,
stripeEmail: token.email,
product: this.product
})
Unfortunately I still get the same No query results for model [App\Product] error even with that. Is there another/better way of passing data from Vue/Axios that I could use instead? If anyone is able to assist it would be much appreciated.
不幸的是，即使这样，我仍然得到相同的 No query results for model [App\Product] 错误。是否有另一种/更好的方式来代替我可以使用的从 Vue/Axios 传递数据的方法？如果有人能够提供帮助，将不胜感激。
Thank you in advance.
先感谢您。
EditThe solution was to recast thisto be a new variable and it started functioning again. Here is the relevant portion of the Vue Code that worked for me:
编辑解决方案是重铸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);
});
}
});
},
采纳答案by Peter
Are you sure when assigning the product ID to data (using product: this.product) that thiskeyword is really your Vue instance? You might need to bind it manually calling .bind(this)on the .post(...)call.
您确定在将产品 ID 分配给数据（使用product: this.product）时，该this关键字确实是您的 Vue 实例吗？您可能需要手动绑定它调用.bind(this)的.post(...)电话。
See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
