title: Posting data using VueJs and Laravel 5
body: <p>I am trying to do the most simple post using Vuejs and laravel but I keep getting an "error 500" along with a strange "Uncaught (in promise)" error when I look it up in chrome dev tools, so heres the code.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="token" id="token" value="{{ csrf_token() }}"&gt;
      &lt;title&gt;Guestbook&lt;/title&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="chatbox"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;form method="POST" v-on:submit="sendMessage"&gt;
                  &lt;h1 v-if="nameIsSet"&gt;@{{ userInfo.name }}&lt;/h1&gt;
                  &lt;input type="text" placeholder="Name" v-model="userInfo.name" v-if="! nameIsSet"&gt;&lt;button v-if="! nameIsSet" class="btn btn-info" v-on:click="setName"&gt;Set Name&lt;/button&gt;
                  &lt;br&gt;
                  &lt;input type="text" placeholder="Message" v-if="nameIsSet" v-model="userInfo.message"&gt;&lt;button v-if="nameIsSet"&gt;Send Message&lt;/button&gt;
                  {{ csrf_field() }}
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.10/vue.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/view-resource.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/guestbook.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>The VueJs Script</strong></p>
  
  <pre><code>Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value');
  
  new Vue({
      el: '#chatbox',
      data:{
          userInfo:{
              name: '',
              message: ''
          },
          nameIsSet: false
      },
      methods:{
          setName: function(){
              this.nameIsSet = true;
          },
          sendMessage: function(e){
              e.preventDefault();
              console.log(userInfo);
              var userInfo = this.userInfo;
              this.$http.post('api/messages', userInfo);
          }
      }
  })
  </code></pre>
  
  <p><strong>The Laravel 5 Routes</strong></p>
  
  <pre><code>Route::get('/', function(){
      return view('guestbook');
  });
  
  //API
  
  Route::get('api/messages', function(){
      return App\Message::all();
  });
  
  Route::post('api/messages', function(){
      App\Message::create(Request::all());
  });
  </code></pre>
  
  <p>As described above it does not work, i'm not sure what the server side error is here anyone gots any ideas ^^?</p>