Sending data in Laravel using Axios & Vue

Question

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.

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]

Here is the original Vue code:

<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>

And my 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:

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.

Thank you in advance.

Edit The solution was to recast this to be a new variable and it started functioning again. Here is the relevant portion of the Vue Code that worked for me:

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

Are you sure when assigning the product ID to data (using product: this.product ) that this keyword is really your Vue instance? You might need to bind it manually calling .bind(this) on the .post(...) call.

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