小编Mio*_*vic的帖子

我正在学习Vuejs(首先不太精通Laravel),我正在尝试在某些任务上建立一个简单的投票系统.我设法添加任务,编辑它们并删除它们,但是当我添加upvote/downvote的东西时,投票数不会改变.

所以这里是Laravel路线routes\api.php:

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

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

这是Vue的Tasks组件模板:

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

我敢肯定，这对你们来说将会非常容易。我正在尝试使帖子的标题始终保持可见的简单列表，并且当您单击列表中的特定帖子时，您将获得帖子的正文。我为此使用了v-show。但是，当我单击特定帖子时，所有帖子的正文都会出现，而不仅仅是我单击的内容。

这是模板：

<template>
<div class="container">
    <h1>My Posts</h1>
    <ul class="list-group">
        <li class="list-group-item" v-for="post in list">
            <div @click="changeShow">
                <h4>{{ post.title }}</h4>
                <p v-show="show">{{ post.body }}</p>
                <span v-show="show" class="label label-primary">ID: {{ post.userId }}</span>
            </div>
        </li>
    </ul>

</div>

逻辑：

<script>

export default{

    data(){
        return{
            msg:'hello vue',
            list: [],
            show: false
        }
    },
    ready(){
        this.fetchPostList();
    },

    methods:{
        fetchPostList: function () {
            var root = 'http://jsonplaceholder.typicode.com';
            this.$http.get(root + '/posts').then(function (response) {
                this.list = response.data;
            })
        },
        changeShow: function () {
            this.show = !this.show;
        }
    }

}