title: Sending data in Laravel using Axios & Vue
body: <p>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.</p>
  
  <p>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]</p>
  
  <p>Here is the original Vue code:</p>
  
  <pre><code>&lt;template&gt;
      &lt;form action="/purchases" method="POST"&gt;
  
          &lt;input type="hidden" name="stripeToken" v-model="stripeToken"&gt;
          &lt;input type="hidden" name="stripeEmail" v-model="stripeEmail"&gt;
  
          &lt;select name="product" v-model="product"&gt;
              &lt;option v-for="product in products" :value="product.id"&gt;
                  {{ product.name }} &amp;mdash; ${{ product.price /100 }}
              &lt;/option&gt;
          &lt;/select&gt;
  
          &lt;button type="submit" @click.prevent="buy"&gt;Buy Book&lt;/button&gt;
  
      &lt;/form&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      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 =&gt; product.id == id);
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>And my PurchasesController.</p>
  
  <pre><code>&lt;?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' =&gt; request('stripeEmail'),
              'source' =&gt; request('stripeToken')
          ]);
  
          Charge::create([
              'customer' =&gt; $customer-&gt;id,
              'amount' =&gt; $product-&gt;price,
              'currency' =&gt; 'aud'
          ]);
  
          return 'All done';
      }
  }
  </code></pre>
  
  <p>I realise that product isn't being passed through to /purchases above so I have tried this:</p>
  
  <pre><code>axios.post('/purchases', {
      stripeToken:  token.id,
      stripeEmail: token.email,
      product: this.product
  })
  </code></pre>
  
  <p>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.</p>
  
  <p>Thank you in advance.</p>
  
  <p><strong>Edit</strong>
  The solution was to recast <code>this</code> to be a new variable and it started functioning again. Here is the relevant portion of the Vue Code that worked for me:</p>
  
  <pre><code>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);
                });
  
          }
      });
  },
  </code></pre>