How to refer laravel csrf field inside a vue template

Question

I have a vue template that contains a form:

<form id="logout-form" :action="href" method="POST" style="display: none;">
        {{ csrf_field() }}
</form>

In laravel, forms must have a csrf_field() defined. But within a vue component, the statement {{ csrf_field() }} means that I have a method named csrf_field in my vue instance and I am calling it.

How do I add csrf_field under this circumstance?

Answer 1

Hello @kartik,

If you have the token in the meta tag of your header (view)

<meta name="csrf-token" content="{{ csrf_token() }}">

you could access the token using

data() {
    return {
        csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content')
    }
}

And add a hidden input field within the form and bind the csrf property to the value like this:

<form id="logout-form" :action="href" method="POST" style="display: none;">