Wie bekomme ich die Daten in vuejs?

Question

Ich versuche, einige Daten in die Datenbank mit Vuejs und Laravel zu posten. Unten sind die Kode

HTML-Teil:

{{ csrf_field() }} 
    <div class="field mini"> 
    <textarea required v-model="newComment.text" placeholder="Write a comment" id="comment_text" name="comment_text"></textarea> 
    </div> 
    <button class="ui blue labeled submit icon button" @click.prevent="postComment()"> 
    <i class="icon edit"></i> Add Reply 
    </button> 

der Vuejs Teil

<script> 
Vue.component('comments',{ 
    template: '#comment-vue-template', 
    data:() => { 

    return { 
     comments: [], 
     newComment: { 
      'text': '' 
     } 
    } 
    }, 
    created: function() { 
    this.getComments(); 
    }, 
    methods: { 
    getComments() { 
     this.$http.get('/comments').then(response => { 
     this.comments = response.body 
     }); 
     setTimeout(this.getComments,1000); 
    }, 
    postComment() { 
     this.$http.post('/comments').then(response => { 
     this.newComment = { 
      'text': '' 
     }; 
     this.getComments(); 
     }) 
    } 
    } 
}); 
new Vue({ 
    el:'#app', 
}); 
</script> 

die Route Teil (web.php)

Route::resource('comments', 'CommentsController'); 

Routelist

|  | POST  | comments     | comments.store | App\Http\Controllers\CommentsController@store       | web,auth  |                             
|  | GET|HEAD | comments     | comments.index | App\Http\Controllers\CommentsController@index       | web,auth  |                             
|  | GET|HEAD | comments/create    | comments.create | App\Http\Controllers\CommentsController@create       | web,auth  |                             
|  | GET|HEAD | comments/{comment}   | comments.show | App\Http\Controllers\CommentsController@show       | web,auth  |                             
|  | PUT|PATCH | comments/{comment}   | comments.update | App\Http\Controllers\CommentsController@update       | web,auth  |                             
|  | DELETE | comments/{comment}   | comments.destroy | App\Http\Controllers\CommentsController@destroy      | web,auth  |                             
|  | GET|HEAD | comments/{comment}/edit  | comments.edit | App\Http\Controllers\CommentsController@edit       | web,auth  

und die CommentsController

public function store(Request $request) 
{ 
    $owner = Auth::User(); 
    $comment = new Comment; 
    $comment->posted = Carbon::now(); 
    $comment->text = $request->comment_text; 
    $comment->owner = array('id'=>$owner->id, 'name'=>$owner->name, 'avatar'=>$owner->avatar); 
    $comment->save(); 
} 

habe ich versucht, die api Route und die normale Route, aber es funktioniert nicht. i halten

status bekommen: "Internal Server Error" url: "/ Kommentare"

selbst wenn die Ressource Route in der web.php vorhanden ist. Die Daten werden jedoch korrekt geladen. Wo ist der Fehler bitte. Vielen Dank im Voraus.

Answer 1

Zuerst habe ich die csrf_token() in der Kopfzeile der Seite hinzugefügt.

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

Dann fügte ich diese Zeilen Code des Vuejs Skript zwischen der Vorlage: '# comment-vue-Template' und die Daten :()

http: { 
    headers: { 
    'X-CSRF-TOKEN': document.querySelector('#token').getAttribute('value') 
    } 
}, 

dann vergaß ich auf die passieren Eingabe in die http.post

postComment: function() { 
     var input = this.newComment; 
     this.$http.post('/comments',input).then(response => { 
     this.newComment = { 
      'text': '' 
     }; 
     this.getComments(); 
     }) 
    } 

Ich hoffe, diese Hilfe jemand anderen.

Nochmals vielen Dank @Ross Wilson

Answer 2

Sie müssen die Daten zur Anfrage hinzufügen, z.

this.$http.post('/comments', {comment_text: this.newComment.text}) 

Hoffe, das hilft!