Vue.js v-шоу в списке

Я уверен, что это будет очень легко для вас, ребята. Я пытаюсь сделать простой список постов с заголовками постов, которые всегда видны, и когда вы нажимаете на конкретный пост в списке, вы получаете его текст. Я использовал V-шоу для этого. Однако, когда я нажимаю на конкретное сообщение, появляются тела всех сообщений, а не только те, на которые я нажал.

Вот шаблон:

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

}

Ответы на вопрос(2)

Ваш ответ на вопрос