How to pass laravel CSRF token value to vue
<p>I have this form where the user should only type text inside a text area:</p>

<pre><code>            &lt;form action="#" v-on:submit="postStatus"&gt;{{-- Name of the method in Vue.js --}}
                &lt;div class="form-group"&gt;
                    &lt;textarea class="form-control" rows="5" maxlength="140" autofocus placeholder="What are you upto?" required v-model="post"&gt;&lt;/textarea&gt;
                &lt;/div&gt;
                &lt;input type="submit" value="Post" class="form-control btn btn-info"&gt;

                {{ csrf_field() }}

            &lt;/form&gt;
</code></pre>

<p>Then, I have this script code where I am using vue.js with ajax in order to pass that text into a controller and eventually save it into the database:</p>

<pre><code>//when we actually submit the form, we want to catch the action
    new Vue({
        el      : '#timeline',
        data    :   {
            post    : '',
        },
        http    :   {
            headers: {
                'X-CSRF-Token': $('meta[name=_token]').attr('content')
            }
        },
        methods : {
            postStatus : function (e) {
                e.preventDefault();
                console.log('Posted: '+this.post+ '. Token: '+this.token);
                $.ajax({
                    url         :   '/posts',
                    type        :   'post',
                    dataType    :   'json',
                    data        :   {
                        'body'  :   this.post,
                    }
                });
            }
        },
    });
</code></pre>

<p>However, this doesn't work so far, since there's this token mismatch exception. I don't know how to make it work. How to pass this token value to the controller. I have tried the following:</p>

<p>1) inside the form, I have added a vue name to the token:</p>

<pre><code>&lt;input type="hidden" name="_token" value="YzXAnwBñC7qPK9kg7MGGIUzznEOCi2dTnG9h9çpB" v-model="token"&gt;
</code></pre>

<p>2) I have tried to pass this token value into the vue: </p>

<pre><code>//when we actually submit the form, we want to catch the action
    new Vue({
        el      : '#timeline',
        data    :   {
            post    : '',
            token   : '',
        },
        methods : {
            postStatus : function (e) {
                e.preventDefault();
                console.log('Posted: '+this.post+ '. Token: '+this.token);
                $.ajax({
                    url         :   '/posts',
                    type        :   'post',
                    dataType    :   'json',
                    data        :   {
                        'body'  :   this.post,
                        '_token':   this.token,
                    }
                });
            }
        },
    });
</code></pre>

<p>... but in the console, vue doesn't even catch it :(</p>

<p>This leads me to the following error:</p>

<blockquote>
  <p>TokenMismatchException in VerifyCsrfToken.php line 68:</p>
</blockquote>

<p>How do I fix it? Any ideas?</p>