How to get the data posted in vuejs?

Question

I am trying to post some data to the database using vuejs and laravel. below are the code

html part:

  {{ 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>

the Vuejs part

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

the route part(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    

and the 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();
}

I tried the api route and the normal route but it does not work. i keep getting

statusText:"Internal Server Error" url:"/comments"

even when the resource route is present in the web.php. Data gets loaded correctly though. Where is the mistake please. Thank you in advance.

Answer 1

First i added the csrf_token() in the header of the page.

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

Then i added these lines of code of the Vuejs script between the template: '#comment-vue-template' and the data:()

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

then i forgot to pass on the input to the http.post

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

Hope this help someone else.

Thanks again @Ross Wilson

Answer 2

You need to add the data to the request e.g.

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

Hope this helps!