Using vue component to submit standard form gives me csrf mismatch error

I have a vue component that contains a form with inputs - i'm using the component to submit data to laravel endpoint.

So the form is simply set up like this in a component called Sale.vue

<template name="sale">
<form class="form-horizontal" role="form" action="/sales/save" method="POST">

I already have csrftoken set up in the head tag of the containing blade file - index.blade.php

<script>
window.Laravel = {!! json_encode([
    'csrfToken' => csrf_token(),
]) !!};
</script>

The index.blade yields sales page, which in turn simply contains the custom component

I would have thought since the main page has the csrftoken already, it should work. However upon submitting the form i'm getting the tokenMismatchException error.

I'm using laravel 5.4 out of box setup for vue, so it contains the bootstrap.js which has the line

window.axios.defaults.headers.common['X-CSRF-TOKEN'] = window.Laravel.csrfToken; Not sure how that impacts as i'm not yet using ajax for the submit.

How can i get the vue component to work with the token ? Naturally, i cannot do another {{csrf_field()}} inside the component form and {!! csrf_field() !!} just prints the literal on the page?

makapaka

8 years ago

Level 7

weird - i received a response in my email but its not showing up here :/

anyway, the suggestion was the form needs the token sent with it and it was suggested i use

<input type="hidden" name="_token" value="{{ csrf_token() }}">

However since the form is inside my vue component as shown above, i get compilation error:

Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead.

I also tried

<input type="hidden" name="_token" :value="csrf_token">

While it fixes the compilation error, it still gives me the tokenMismatchException

jameybay

8 years ago

Level 3

Had a similar problem. I fixed it by passing the form into the component.

Nicholaus

8 years ago

Level 4

Same issue here. Fixed by setting a computed property in my Vue component:

csrfToken() { window.Laravel.csrfToken; }

Then using that computed property in the form in the Vue component:

<input type="hidden" name="_token" :value="csrfToken">

Please or to participate in this conversation.