如何获取vuejs中发布的数据？

Question

我正在尝试 post 使用 vuejs 和 laravel 将一些数据添加到数据库中。下面是代码

html部分：

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

Vuejs 部分

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

路线部分(web.php)

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

路由列表

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

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

我尝试了api路线和正常路线，但它不起作用。我不断收到

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

即使资源路由存在于 web.php 中。虽然数据被正确加载。请问哪里错了。提前谢谢你。

Answer 1

您需要将数据添加到请求中，例如

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

希望对您有所帮助！

Answer 2

首先我在页面的 header 中添加了 csrf_token()。

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

然后我在模板之间添加了 Vuejs 脚本的这些代码行：'#comment-vue-template' 和数据：()

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

然后我忘了将输入传递给 http.post

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

希望这对其他人有帮助。

再次感谢@Ross Wilson

如何获取vuejs中发布的数据？

How to get the data posted in vuejs?

javascript

laravel

vue.js

vue-resource