在$中获得成功或完成响应的问题.当在Laravel中使用vue.js时

我有这个简单的表单，用户应该只在文本区域内输入文本。当用户单击提交按钮时，在javascript中，我调用vue和ajax将该文本插入数据库。

我的问题是，在用户点击提交后，我希望文本区域被清除，但在文本保存到数据库后，文本仍然存在。它仍然存在。由于我正在使用vue.js和ajax，因此我正在等待。done(成功)回调函数，以便继续清除表单。

或者如果文本保存到数据库中，是否有其他方法来清除文本区域?

我的刀片代码如下:

<div class="row" id="timeline">
    <div class="col-md-4">
        <form action="#" v-on:submit="postStatus">{{-- Name of the method in Vue.js --}}
            <div class="form-group">
                <textarea class="form-control" rows="5" maxlength="140" autofocus placeholder="What are you upto?" required v-model="post" id="textareapost"></textarea>
            </div>
            <input type="submit" value="Post" class="form-control btn btn-info">
            {{ csrf_field() }}
        </form>
    </div>
    <div class="col-md-8">
        Timeline
    </div>
</div>

这是我的控制器

<?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->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->validate($request,[
            'body'  =>  'required|max:140',
        ]);
        //die('Posted in the controller!: '.$request->body); //$request->get('body');
        //creating the post from the user, from the post that belongs to the user:
        $createdPost = $request->user()->posts()->create([
            'body'  =>  $request->body,
        ]);
        //Now respond with the post that has been created:
        return response()->json($post->with('user')->find($createdPost->id));
    }
}

和目前为止的javascript代码:

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

保存文本后，我从未得到。done部分的console.log文本，但我得到。fail消息，上面写着:

请求失败:parsererror

控制器的响应如下所示:

<?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"}}

我注意到响应中添加了<?php。也许是Chrome的检查元素工具?我错过了什么?(注意:我使用jQuery 3.1.1和Laravel 5.3)