title: How to pass laravel CSRF token value to vue
body: <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>