Javascript Laravel 5.3+；Vue Reddit-like投票系统

我正在学习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'])]);
}); 
});

Tasks表的迁移如下所示（我使用了sqlite）：

这是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脚本中的某个地方，要么我声明投票错误（投票：数字？），要么我不能像以前那样从upvote和downvote函数调用updateVotes函数

编辑： 仍然不起作用，但我有Vue.js devtools，它肯定认可投票：

…但以一种非常奇怪的方式。单击upvote时，devtools中的投票将更改为“11”，而不是1。当我单击downvote时，它返回到0。不过，它在视图中不会改变。这一切都是在我做出以下改变之后发生的：

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

致：

…根据用户Dan的建议，在更改

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

致：

因为我认为我以前只获得投票，然后在函数的其余部分将它们当作任务对象。下行投票函数也是如此

以下是console中现在出现的内容：

vue resource.common.js？d39b:966修补程序500（内部服务器错误）（匿名函数）@vue resource.common.js？d39b:966承诺$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.common.js？d39b:881exec@vue resource.common.js？d39b:1017nextvue 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: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: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.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未捕获（承诺中）响应{url:“api/task/8/vows”，正文：↵↵ ↵ ↵↵↵ ↵ ↵", 标题：对象，状态：500，状态文本：“内部服务器错误”…}

---

如果您更换以下部件，它是否有效：

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

与

（代表OP发布）

---

问题已经解决。我没有在任务模型中添加

protected$fillable=['voces']

。

仍然没有，但我想这是需要更改的内容之一。您的浏览器控制台或日志文件中是否有任何错误？加载资源失败：服务器响应状态为500（内部服务器错误）Uncaught（承诺）响应。但是，在您第一次发表评论之后，我注意到我在获取投票的路由中犯了一个错误。我这样做了：Route:：get（'task/{id}/voces'，function（$id）{return\App\task:：findOrFail（$id）->voces->get（）；}）；但在vue脚本中将其视为任务对象。因此，我将upvote和downvote函数的vue更改为：this.$http.get（'api/Task/'+id），而不是this.$http.get（'api/Task/'+id+'/vots'））在Chrome Developer Tools中，单击“网络”选项卡。在发出AJAX请求时，您应该会看到这些请求的列表。单击导致问题的请求，然后单击另一个窗口中的“响应”或“预览”选项卡。这可能会让您更好地了解所发生的情况。如果没有，请查看您的Laravel日志文件（通常是storage/logs/laravel todaysdate.log）好的，非常感谢。我一到家就会这么做。

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

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

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

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

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