How to show specific field on click button of a loop vue js

I have a posts loop where each post has a comment box.Initially all comment box are hidden and when someone clicks on 'comments' button it should show the comment field for this user. I am having trouble to show specific comment box associated with the specific post. my code is as follows -

<div class="post-section" v-for="(post,index) in posts">
    <div class="media-content"></div>

    <button @click="getComments(post, index)" class="btn btn-link"><i class="fa fa-comments-o"></i> Comments</button>

    <comment-input :postId="post.id"></comment-input>
</div>

<script>
    export default {
        data() {
            return {
                posts: [],
            }
        },

        created() {
            Post.all(posts => this.posts = posts);
        },

        methods: {
            getComments(post, index){
                axios.post('getcomments', {id: post.id})
                    .then(response => {
                        this.$set(this.posts, index, Object.assign({}, post, { comments: response.data }));
                    });
            },
        }
    }
</script> 

When getComments(post, index) method executes i want to make the next comment-input only. Any help??

thanks in advance.

via Chebli Mohamed