vue.js and laravel 5.2, storing data to db

Question

--EDIT--

This is working code now, use it as working example for your requests, please do comment if any modifications are to be made.

--EDIT--

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).

I'm having problems saving the data to the database using the code below.

My form:

{!! Form::open(['method' => 'POST', 'route' => 'contact', '@submit.prevent' => 'sendmessage']) !!}
<div class="form-group animated fadeIn">
    {!! Form::label('name','Name:',['class' => '']) !!}
    {!! Form::text('name', null, ['class' => 'form-control', 'placeholder' => 'Your name', 'v-model' => 'messageData.name']) !!}
</div>
<div class="form-group animated fadeIn">
    {!! Form::label('mail','E-mail:',['class' => '']) !!}
    {!! Form::text('mail', null, ['class' => 'form-control', 'placeholder' => 'Your e-mail', 'v-model' => 'messageData.mail']) !!}
</div>
<div class="form-group animated fadeIn">
    {!! Form::label('phone','Phone:',['class' => '']) !!}
    {!! Form::text('phone', null, ['class' => 'form-control', 'placeholder' => 'Your phone number', 'v-model' => 'messageData.phone']) !!}
</div>
<div class="form-group animated fadeIn">
    {!! Form::label('message','Message:',['class' => '']) !!}
    {!! Form::textarea('message', null, ['class' => 'form-control', 'placeholder' => 'Enter your message', 'v-model' => 'messageData.message']) !!}
</div>
<div class="form-group animated fadeIn">
    {!! Form::submit('Send message', ['class' => 'btn btn-default form-control bold-black']) !!}
</div>
{!! Form::close() !!}

Route (not really sure what does this new middleware web does, will appreciate the link):

Route::group(['middleware' => ['web']], function () {
    Route::post('/contact', ['as' => 'contact', 'uses' => 'MessageController@store']);
});

Store method in messageController:

public function store(MessageRequest $request)
{
    Message::create($request->all());
    $message = "Message sent succesfully.";
    return $message;
}

MessageRequest:

public function rules()
{
    return [
        'name' => 'required|min:3',
        'mail' => 'required|email',
        'phone' => '',
        'message' => 'required|min:10',
    ];
}

});

And finally the Vue Component:

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');
                    });
        }
    }
},

This is the console log:

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

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.

EDIT:

I have solved the above problem: I was not importing csrf_token in header, add this to head of your html file:

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

Also, the / route should go to web middleware group:

Route::group(['middleware' => ['web']], function () {
    Route::get('/', function () {
        return view('welcome');
    });
    Route::post('/contact', ['as' => 'contact', 'uses' => 'MessageController@store']);
});

However, it seems I'm not sending any data to post request since whatever I do I get output:

{"name":["The name field is required."],"mail":["The mail field is required."],"message":["The message field is required."]}

which are my validation rules for the message model.

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.)

In Vue contact component send method needs to look like this

        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');
                    });
        }

to make it work with naming in MessageRequest.

Answer 1

Just as one final tidbit, you don't need to do the name:this.messageData.name thing if you did this:

sendmessage: function(messageData) {
        this.$http.post('contact', this.messageData)
                .then(function() {
                    console.log('success ');
                })
                .catch(function() {
                    console.log('error');
                });
    }