Laravel 5.3+ Vue類似Reddit的投票系統

Question

我在學習Vuejs（不太精通Laravel），並且我正在嘗試在一些任務上製作一個簡單的投票系統。我設法添加任務，編輯它們並刪除它們，但是當我添加upvote/downvote的東西時，選票的數量不會改變。

因此，這裏有在routes\api.php的Laravel路線：

Route::group(['middleware'=>'api'],function(){ 

Route::get('tasks', function(){ 
    return \App\Task::latest()->orderBy('created_at', 'desc')->get(); 
}); 

Route::get('task/{id}', function($id){ 
    return \App\Task::findOrFail($id); 
}); 

Route::post('task/store', function(Request $request){ 
    return App\Task::create(['body' => $request->input(['body'])]); 
}); 

Route::patch('task/{id}', function(Request $request, $id){ 
    return \App\Task::findOrFail($id)->update(['body' => $request->input(['body'])]); 
}); 

Route::delete('task/{id}', function($id){ 
    return \App\Task::destroy($id); 
}); 

Route::get('task/{id}/votes', function($id){ 
    return \App\Task::findOrFail($id)->votes->get(); 
}); 

Route::patch('task/{id}/votes', function(Request $request, $id){ 
    return \App\Task::findOrFail($id)->update(['votes'=> $request->input(['votes'])]); 
}); 
}); 

的任務表中的遷移看起來像這樣（我使用的SQLite）：

Schema::create('tasks', function (Blueprint $table) { 
     $table->increments('id'); 
     $table->text('body'); 
     $table->integer('votes')->default(1); 
     $table->timestamps(); 
    }); 

這是任務的組件模板Vue：

<h1>My Tasks</h1> 
<hr> 
<h4>New Task</h4> 
<form action="#" @submit.prevent="edit ? updateTask(task.id) : createTask()"> 
    <div class="input-group"> 
     <input type="text" name="body" v-model="task.body" v-el:taskinput class="form-control" autofocus> 
     <span class="input-group-btn"> 
      <button type="submit" class="btn btn-success" v-show="!edit">New Task</button> 
      <button type="submit" class="btn btn-primary" v-show="edit">Edit Task</button> 
     </span> 
    </div> 
</form> 
<hr> 
<hr> 
<h3>All Tasks</h3> 
<ul class="list-group"> 
    <li class="list-group-item" v-for="task in list"> 
     {{ task.body }} 
     <button class="btn-success btn-xs" @click="upvote(task.id)" :class="{disabled: upvoted}">Upvote</button> 
     <span class="label label-primary">{{ task.votes }}</span> 
     <button class="btn-danger btn-xs" @click="downvote(task.id)" :class="{disabled: downvoted}">Downvote</button> 
     <span class="pull-right"> 
      <button class="btn-primary btn-xs" @click="showTask(task.id)">Edit Task</button> 
      <button class="btn-danger btn-xs" @click="deleteTask(task.id)">Delete Task</button> 
     </span> 
    </li> 
</ul> 

最後，Vue腳本：

export default{ 
    data(){ 
     return{ 
      edit: false, 
      list: [], 
      task: { 
       id: '', 
       body: '', 
       votes: Number 
      }, 
      upvoted: false, 
      downvoted: false 
     } 
    }, 

    ready: function() { 
     this.fetchTaskList(); 
    }, 

    methods:{ 

     fetchTaskList: function() { 
      this.$http.get('api/tasks').then(function (response) { 
       this.list = response.data 
      }); 
     }, 

     createTask: function() { 
      this.$http.post('api/task/store', this.task); 
      this.task.body = ''; 
      this.edit = false; 
      this.fetchTaskList(); 
     }, 

     updateTask: function (id) { 
      this.$http.patch('api/task/' + id, this.task); 
      this.task.body=''; 
      this.edit = false; 
      this.fetchTaskList(); 
     }, 

     showTask: function (id) { 
      this.$http.get('api/task/' + id).then(function (response) { 
       this.task.id = response.data.id; 
       this.task.body = response.data.body; 
      }); 
      this.$els.taskinput.focus(); 
      this.edit = true; 
     }, 

     deleteTask: function (id) { 
      this.$http.delete('api/task/' + id); 
      this.fetchTaskList(); 
     }, 

     updateVotes: function (id, votes) { 
      this.$http.patch('api/task/'+id+'/votes', votes); 
     }, 

     upvote: function (id) { 
      this.$http.get('api/task/'+id+'/votes').then(function (response) { 
       this.task.id = response.data.id; 
       this.task.votes = response.data.votes + 1; 
       updateVotes(this.task.id, this.task.votes); 
      }); 
      this.upvoted = !this.upvoted; 
      this.downvoted = false; 
     }, 

     downvote: function (id) { 
      this.$http.get('api/task/'+id+'/votes').then(function (response) { 
       this.task.id = response.data.id; 
       this.task.votes = response.data.votes - 1; 
       updateVotes(this.task.id, this.task.votes); 
      }); 
      this.upvoted = false; 
      this.downvoted = !this.downvoted; 
     }, 
    } 
} 

我猜錯誤某處Vue腳本，無論是我錯了，宣佈投票（投票：號碼），或者我不能像我的給予好評和downvote函數調用updateVotes功能沒有。

編輯： 仍然沒有工作，但我有Vue.js devtools和它肯定認識到票： https://snag.gy/sE5gp6.jpg

......但在一個非常奇怪的方式。當我點擊upvote時，devtools中的選票變成了'11'，而不是1.當我點擊downvote時，它回到0.它在視圖中沒有改變。這是我做了從改變後的所有：

updateVotes(this.task.id, this.task.votes); 

要：

this.updateVotes(this.task.id, this.task.votes); 

..as丹建議用戶，並改變後：

upvote: function (id) { 
     this.$http.get('api/task/'+id+'/votes') 

要：

upvote: function (id) { 
     this.$http.get('api/task/'+id) 

因爲我想我以前是g只是選票，然後把它們當作一個Task對象用於其餘的函數。相同的downvote功能。

這是在控制檯出現現在：

VUE-resource.common.js d39b：966 PATCH http://localhost:8000/api/task/8/votes 500（內部服務器錯誤）（匿名函數）@ VUE-resource.common.js ？d39b：966Promise $ 1 @ vue-resource.common.js？d39b：192xhrClient @ vue-resource.common.js？d39b：927sendRequest @ vue-resource.common.js？d39b：1060exec @ vue-resource.common.js？ d39b：1017next @ vue-resource.common.js？d39b：1042before @ vue-resource.common.js？d39b：881exec @ vue-resource.common.js？d39b：1017next @ vue-resource.common.js？d39b： 1042timeout @ vue-resource.common.js？d39b：920exec @ vue-resource.common.js？d39b：1017next @ vue-resource.common.js？d39b：1042method @ vue-resource.common.js？d39b：895exec @ VUE-resource.comm on.js？d39b：1017next @ vue-resource.common.js？d39b：1042body @ vue-resource.common.js？d39b：802exec @ vue-resource.common.js？d39b：1017next @ vue-resource.common。 js？d39b：1042jsonp @ vue-resource.common.js？d39b：867exec @ vue-resource.common.js？d39b：1017next @ vue-resource.common.js？d39b：1042header @ vue-resource.common.js？ d39b：903exec @ vue-resource.common.js？d39b：1017next @ vue-resource.common.js？d39b：1042cors @ vue-resource.common.js？d39b：777exec @ vue-resource.common.js？d39b：1017next @ vue-resource.common.js？d39b：1042（匿名函數）@ VM56：32exec @ vue-resource.common.js？d39b：1017（匿名函數）@ vue-resource.common.js？d39b：1045Promise $ 1 @ vue-resource.common.js？d39b：192Client @ vue-resource.common.js？d39b：1010Http @ vue-resource.common.js？d39b：1152Http 。（匿名函數）@ vue-resource.common.js？d39b：1188updateVotes @ Tasks.vue？34c5：94（匿名函數）@ vue.common.js？4a36：216（匿名函數）@Tasks.vue？34c5： 102 localhost /：1未被捕獲（在promise中）響應{url：「api/task/8/votes」，body：「↵↵↵↵↵↵↵」，headers：Object，status：500，statusText：「Internal服務器錯誤「...}

Answer 1

如果替換：

updateVotes(this.task.id, this.task.votes); 

隨着

this.updateVotes(this.task.id, this.task.votes); 

Answer 2

（發佈代表OP）的。

問題解決了。我沒有在任務模型中添加protected $fillable = ['votes']。