JoerJoers
972
22
Laravel

Laravel and Vue - AJAX Post Request Error

Posted 3 years ago by JoerJoers

I'm following the code from Laravel and Vue lesson but i got some problem with the Ajax Post request. Below is my setup.

Routes File

Route::post('api/updateinfo', [
                'as'    =>  'update_info',
                'uses'  =>  'AgencyController@updateInfo'
            ]);

View

<meta id="token" name="token" value="{ csrf_token() }">
<form method="POST" v-on="submit: onSubmitForm($event)">
    <script src="/assets/js/pages/profile-vue.js"></script>

profile-vue.js

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value');

new Vue({
    el: '#basic-info',

    data: {
        editInfo: {
            name: '',
            website: '',
            email: ''
        }
    },

    methods: {
        onSubmitForm: function(e) {
            e.preventDefault();

            var info = this.editInfo;

            this.$http.post('api/updateinfo', info);
        }
    }

});

THE PROBLEM: I'm having a token mismatch exception. I tried alerting the token from JS it shows the token. I think when im submitting the form it doesn't really trigger the function in the vue.js because i try to have an alert inside the onSubmitForm function the alert doesn't show. Anything i have done wrong? Thanks for the help!

Please sign in or create an account to participate in this conversation.