Problems getting success or done response in $.ajax when using vue.js in Laravel
<p>I have this simple form where the user should only type text inside a textarea. When the user clicks on the submit button, inside the javascript, I make a call with vue and ajax to insert that text into the database. </p>

<p>My problem is that, right after the user clicks on submit, I want the textarea to be cleared, but after the text has been saved into the database, the text is still there. It persists. Since I am using vue.js and ajax, there is this .done (success) callback function I am waiting in order to proceed to clear the form.</p>

<p>Or is there any other idea to clear the textarea, if the text was saved into the database?</p>

<p>Here is my blade code of the form:</p>

<pre><code>&lt;div class="row" id="timeline"&gt;
    &lt;div class="col-md-4"&gt;
        &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" id="textareapost"&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;
    &lt;/div&gt;
    &lt;div class="col-md-8"&gt;
        Timeline
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>This is my controller:</p>

<pre><code>&lt;?php

namespace App\Http\Controllers;

use App\Post;
use Illuminate\Http\Request;

use App\Http\Requests;

class PostController extends Controller
{
    public function create(Request $request, Post $post)
    {
        //$request-&gt;body;
        //Remember, all we really need is the body. Because if create this post through
        //the User model, it'll automatically assign us a user_id

        //validation:
        $this-&gt;validate($request,[
            'body'  =&gt;  'required|max:140',
        ]);
        //die('Posted in the controller!: '.$request-&gt;body); //$request-&gt;get('body');

        //creating the post from the user, from the post that belongs to the user:
        $createdPost = $request-&gt;user()-&gt;posts()-&gt;create([
            'body'  =&gt;  $request-&gt;body,
        ]);

        //Now respond with the post that has been created:
        return response()-&gt;json($post-&gt;with('user')-&gt;find($createdPost-&gt;id));
    }
}
</code></pre>

<p>And the javascript code so far:</p>

<pre><code>var csrf_token = $('meta[name="csrf-token"]').attr('content');
    /*Event handling within vue*/
    //when we actually submit the form, we want to catch the action
    new Vue({
        el      : '#timeline',
        data    :   {
            post    : '',
            token   : csrf_token,
        },
        methods : {
            postStatus : function (e) {
                e.preventDefault();
                console.log('Posted: '+this.post+ '. Token: '+this.token);
                var request = $.ajax({
                    url         :   '/posts',
                    method      :   "POST",
                    dataType    :   'json',
                    data        :   {
                        'body'  :   this.post,
                        '_token':   this.token,
                    }
                }).done(function (msg) {
                    console.log('Data saved: '+msg);
                    this.post = '';/*Attempting to clear the form*/
                }.bind(this));/*http://stackoverflow.com/a/26479602/1883256*/

                request.done(function( msg ) {
                    console.log('Data saved: '+msg+'. Outside ...');
                    //$( "#log" ).html( msg );
                });

                request.fail(function( jqXHR, textStatus ) {
                    console.log( "Request failed: " + textStatus );
                });
            }
        },
    });
</code></pre>

<p>After the the text has been saved, I never get the console.log text of the .done part, but I get the .fail message which says:</p>

<blockquote>
  <p>Request failed: parsererror</p>
</blockquote>

<p>And the response from the controller is right the following:</p>

<pre><code>&lt;?php{"id":29,"user_id":1,"body":"Sunday evening post","created_at":"2016-10-09 23:03:11","updated_at":"2016-10-09 23:03:11","user":{"id":1,"firstname":null,"lastname":null,"username":"pathros","email":"pathros@somemail.net","created_at":"2016-10-08 05:33:06","updated_at":"2016-10-08 18:57:19"}}
</code></pre>

<p>I noticed that the response adds <code>&lt;?php</code>. Is it maybe the Chrome's inspect elements tool?
What am I missing?
(Note: I am using jQuery 3.1.1 and Laravel 5.3)</p>