Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

casc-or's avatar

Using Vue-Router In Vue Component

I'm struggling to understand something regarding Vue and can't seem to find a chunk of information that makes the penny drop for me.

I am building an application which allows users to buy a variety of different memberships and licences. I decided rather than having code in the controllers for memberships AND licences that I would create an 'item' which could be either of these two things and then build a Vue component which would be a purchase button I could drop into views. It roughly follows the example in Ep 3 of the Stripe checkout series.

The component is working, POSTs to a route using AJAX, which makes the charge on the card, processes the sale in the database, and fires an alert on success.

However, from there I want to send the user to another route, passing a parameter to the route, so they end up on a different page (actually the one from which they came).

This is where i'm stuck. What I think I need to do is something like this

this.$http.post('/payments/charge', this.$data)
    .then(response => alert('Thanks for your payment!'));
    
this.$router.go('members.edit', item.member_id);

The first command works fine. The second one not so much.

In my bootstrap.js I have

window.Vue = require('vue');
require('vue-resource');
window.VueRouter = require('vue-router');

window.Vue.use(window.VueRouter);

And in my app.js

Vue.component('CheckoutForm', require('./components/CheckoutForm.vue'));

const app = new Vue({
    el: '#app'
});

In my PaymentsController, the charge function has

return Redirect::route('memberships.renewal', array('id' => $item->membership_id));

and the renewal function on the MembershipController has

return redirect(route('members.edit', $membership->member_id));

which is where I want to end up but can't seem to get to.

Any pointers or clues gratefully appreciated as to how i can send the user to a route after the AJAX post completes.

PS I should also include the console error

Uncaught TypeError: Cannot read property 'go' of undefined
    at TokenCallback.token [as fn] (eval at <anonymous> (app.js:96), <anonymous>:53:31)
    at TokenCallback.trigger (checkout.js:3)
    at TokenCallback.trigger (checkout.js:3)
    at IframeView.onToken (checkout.js:3)
    at IframeView.closed (checkout.js:3)
    at Object.closed (checkout.js:3)
    at RPC.processMessage (checkout.js:2)
    at RPC.processMessage (checkout.js:2)
    at RPC.message (checkout.js:2)
    at checkout.js:2
0 likes
2 replies

Please or to participate in this conversation.