Laravel에서 vue.js를 사용할 때 $ .ajax에서 성공 또는 응답 완료 문제

사용자가 텍스트 영역 안에 텍스트 만 입력해야하는 간단한 양식이 있습니다. 사용자가 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));
    }
}

그리고 지금까지의 자바 스크립트 코드 :

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":"[email protected]","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을 사용하고 있습니다.)