Question

我正在尝试使用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');

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

和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：“内部服务器错误”url：“/ comments”

即使web.php中存在资源路由。但是数据正确加载。请问哪里有错误。提前谢谢。

Answer 1

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

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

希望这有帮助！

Answer 2

首先，我在页面标题中添加了csrf_token（）。

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

然后我在模板之间添加了这些Vuejs脚本代码：＆＃39;＃comment-vue-template＆＃39;和数据:(）

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中发布数据？

2 个答案: