लैरवेल 5.3 + वू रेडडिट-जैसे वोटिंग सिस्टम

Question

मैं वूज सीख रहा हूं (पहली जगह लार्वेल में बहुत कुशल नहीं हूं), और मैं कुछ कार्यों पर एक साधारण मतदान प्रणाली बनाने की कोशिश कर रहा हूं। मैं कार्यों को जोड़ने, उन्हें संपादित करने और उन्हें हटाने में कामयाब रहा, लेकिन जब मैंने अपवॉट/डाउनवोट सामान जोड़ा, तो वोटों की संख्या में बदलाव नहीं आया।

तो यहाँ 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(); 
    }); 

इस कार्य के लिए घटक टेम्पलेट है वू:

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

और आखिरकार, वू स्क्रिप्ट:

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 लिपि में, या तो मैं वोट गलत घोषित कर रहा हूँ (वोट: संख्या), या मैं updateVotes समारोह मैं की तरह वोट दें और downvote कार्यों से कॉल नहीं कर सकते किया।

संपादित करें: फिर भी काम नहीं कर रहा है, लेकिन मैं Vue.js DevTools है और यह निश्चित रूप से वोट पहचानने है: https://snag.gy/sE5gp6.jpg

... लेकिन एक बहुत ही अजीब तरीके से। जब मैं upvote पर क्लिक करता हूं, तो devtools में वोट '11' में बदल जाता है, 1 नहीं। जब मैं डाउनवोट पर क्लिक करता हूं, तो यह 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) 

जैसा कि मुझे लगता है कि मैं पहले जी था केवल वोटों को नकल करना और फिर उन्हें शेष कार्य के लिए कार्य वस्तु की तरह व्यवहार करना। डाउनवोट फ़ंक्शन के लिए वही।

Vue-resource.common.js d39b:: 966 PATCH http://localhost:8000/api/task/8/votes 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-resource.common.js? d39b: 881exec @ vue-resource.common.js? d39b: 1017next @ vue-resource.common.js? d39b: 1042 टाइमआउट @ 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। जेएस? डी 3 9बी: 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: 1045 $ 1 से समझौता करें @ vue-resource.common.js? d39b: 1 92Client @ 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 (अज्ञात फ़ंक्शन) @ कार्य। vue? 34c5: 102 लोकलहोस्ट /: 1 अनकॉट (वादे में) प्रतिक्रिया {यूआरएल: "एपीआई/कार्य/8/वोट", बॉडी: "↵↵ ↵ ↵↵↵ ↵ ↵", हेडर: ऑब्जेक्ट, स्टेटस: 500, स्टेटस टेक्स्ट: "आंतरिक सर्वर त्रुटि "...}

Answer 1

यह काम करता है अगर आप की जगह:

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

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

Answer 2

साथ (ओ पी की ओर से प्रकाशित किया गया था)।

समस्या हल हो गई है। मैंने टास्क मॉडल में protected $fillable = ['votes'] नहीं जोड़ा।