vue.js and laravel 5.2, storing data to db
<p>--EDIT--</p>
<p>This is working code now, use it as working example for your requests, please do comment if any modifications are to be made.</p>
<p>--EDIT--</p>
<p>Im trying to build a simple one pager with contact form for messages.
Im OK with Laravel but new to Vue.js (been working with jQuery before).</p>
<p>I'm having problems saving the data to the database using the code below.</p>
<p>My form:</p>
<pre><code>{!! Form::open(['method' =&gt; 'POST', 'route' =&gt; 'contact', '@submit.prevent' =&gt; 'sendmessage']) !!}
&lt;div class=&quot;form-group animated fadeIn&quot;&gt;
    {!! Form::label('name','Name:',['class' =&gt; '']) !!}
    {!! Form::text('name', null, ['class' =&gt; 'form-control', 'placeholder' =&gt; 'Your name', 'v-model' =&gt; 'messageData.name']) !!}
&lt;/div&gt;
&lt;div class=&quot;form-group animated fadeIn&quot;&gt;
    {!! Form::label('mail','E-mail:',['class' =&gt; '']) !!}
    {!! Form::text('mail', null, ['class' =&gt; 'form-control', 'placeholder' =&gt; 'Your e-mail', 'v-model' =&gt; 'messageData.mail']) !!}
&lt;/div&gt;
&lt;div class=&quot;form-group animated fadeIn&quot;&gt;
    {!! Form::label('phone','Phone:',['class' =&gt; '']) !!}
    {!! Form::text('phone', null, ['class' =&gt; 'form-control', 'placeholder' =&gt; 'Your phone number', 'v-model' =&gt; 'messageData.phone']) !!}
&lt;/div&gt;
&lt;div class=&quot;form-group animated fadeIn&quot;&gt;
    {!! Form::label('message','Message:',['class' =&gt; '']) !!}
    {!! Form::textarea('message', null, ['class' =&gt; 'form-control', 'placeholder' =&gt; 'Enter your message', 'v-model' =&gt; 'messageData.message']) !!}
&lt;/div&gt;
&lt;div class=&quot;form-group animated fadeIn&quot;&gt;
    {!! Form::submit('Send message', ['class' =&gt; 'btn btn-default form-control bold-black']) !!}
&lt;/div&gt;
{!! Form::close() !!}
</code></pre>
<p>Route (not really sure what does this new middleware web does, will appreciate the link):</p>
<pre><code>Route::group(['middleware' =&gt; ['web']], function () {
    Route::post('/contact', ['as' =&gt; 'contact', 'uses' =&gt; 'MessageController@store']);
});
</code></pre>
<p>Store method in messageController:</p>
<pre><code>public function store(MessageRequest $request)
{
    Message::create($request-&gt;all());
    $message = &quot;Message sent succesfully.&quot;;
    return $message;
}
</code></pre>
<p>MessageRequest:</p>
<pre><code>public function rules()
{
    return [
        'name' =&gt; 'required|min:3',
        'mail' =&gt; 'required|email',
        'phone' =&gt; '',
        'message' =&gt; 'required|min:10',
    ];
}
</code></pre>
<p>});</p>
<p>And finally the Vue Component:</p>
<pre><code>contact: {
    template: '#contact-template',

    data: function() {
        return {
            messageData: {
                name: null,
                mail: null,
                phone: null,
                message: null
            }
        }
    },

    methods: {
        sendmessage: function(messageData) {
            this.$http.post('contact', {messageData:messageData})
                    .then(function() {
                        console.log('success ');
                    })
                    .catch(function() {
                        console.log('error');
                    });
        }
    }
},
</code></pre>
<p>This is the console log:</p>
<pre><code>POST http://localhost:8080/contact 500 (Internal Server Error)
(anonymous function) @ vue-resource.js:1182
Promise @ vue-resource.js:854
module.exports @ vue-resource.js:1150
module.exports @ vue-resource.js:781
(anonymous function) @ vue-resource.js:1213

error
</code></pre>
<p>I haven't included csrf token anywhere yet so that could be the problem. I'm working actively on this and any help is appreciated.</p>
<p>EDIT:</p>
<p>I have solved the above problem:
I was not importing <code>csrf_token</code> in header, add this to head of your html file:</p>
<pre><code>&lt;meta id=&quot;token&quot; name=&quot;token&quot; content=&quot;{{ csrf_token() }}&quot;&gt;
</code></pre>
<p>Also, the <code>/</code> route should go to <code>web</code> middleware group:</p>
<pre><code>Route::group(['middleware' =&gt; ['web']], function () {
    Route::get('/', function () {
        return view('welcome');
    });
    Route::post('/contact', ['as' =&gt; 'contact', 'uses' =&gt; 'MessageController@store']);
});
</code></pre>
<p>However, it seems I'm not sending any data to post request since whatever I do I get output:</p>
<pre><code>{&quot;name&quot;:[&quot;The name field is required.&quot;],&quot;mail&quot;:[&quot;The mail field is required.&quot;],&quot;message&quot;:[&quot;The message field is required.&quot;]}
</code></pre>
<p>which are my validation rules for the message model.</p>
<p>EDIT2: (this one is final and hope this helps someone as complete working example, what needs to be done is add the errors under the input fields.)</p>
<p>In Vue contact component send method needs to look like this</p>
<pre><code>        sendmessage: function(messageData) {
            this.$http.post('contact', {name:this.messageData.name,mail:this.messageData.mail,phone:this.messageData.phone,message:this.messageData.message})
                    .then(function() {
                        console.log('success ');
                    })
                    .catch(function() {
                        console.log('error');
                    });
        }
</code></pre>
<p>to make it work with naming in <code>MessageRequest</code>.</p>