javascript - How to show the only input field next to button within a loop -

i have posts loop each post has comment box.initially comment box hidden , when clicks on 'comments' button should show comment field user. having trouble show specific comment box associated specific post. code follows -

<div class="post-section" v-for="(post,index) in posts">     <div class="media-content">{{post.body}}</div>      <button @click="getcomments(post, index)" class="btn btn-link"><i class="fa fa-comments-o"></i>{{ post.total_comments }} 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 want make visible next comment-input only. help??

thanks in advance.

you can add property called togglecomments: false post object. , use toggle comments section including comment text box grouped in <div>.

here fiddle

html

<div id="app">     <div v-for="(post,index) in posts">         <p>{{post.body}}</p>         <button @click="getcomments(post, index)" class="btn btn-link">show/hide comments</button>         <div v-if="post.togglecomments">             <textarea rows="1" cols="50" placeholder="comment here ..."></textarea>             <div v-for='comment in post.comments'>                 <span class="comm">commented by:{{comment.name}}</span>             </div>         </div>     </div> </div>   

script

new vue({     el: '#app',     data: {         posts: [             {id: 1, body: ' post #1'},             {id: 2, body: ' post #2'},             {id: 3, body: ' post #3'},             {id: 3, body: ' post #4'},             {id: 4, body: ' post #5'}         ]     },     methods:{         getcomments(post, index){             if(!post.comments){                 vue.http.get('https://jsonplaceholder.typicode.com/users')                 .then(response => {                     this.$set(this.posts, index, object.assign({}, post, { comments: response.data }, { togglecomments: false}));                 },err => {                     //handle errors                 });             }             post.togglecomments = !post.togglecomments;         }     } })