Disable all textarea in loop while commenting on a post in vuejs

Question

Whenever I want to comment by clicking on comment Button all the textarea of post opens at a time how to only one text area at a time.

   // here is view 
<div id="app" v-cloak>
 <div v-for="post ,key in posts" >
@{{post.content}}   
 <span @click="commentBoxSeen=!commentBoxSeen">Comment</span>
 <div  v-for="(comment,index) in post.comment">
  @{{comment.content}}
<div v-if="commentBoxSeen">
  <textarea placeholder="Type your Answer here" v-model="commentdata[key]" ></textarea>
  <button>Comment</button>
</div>
</div>
</div>
</div>
var app = new Vue({
   el: '#app',
   data() {
   return {  
   posts:[],
   commentdata:{},
   commentBoxSeen: false,
    };
  },
  });

Answer 1

This happens because all of your textareas is hidden behind one boolean, which toggles whenever you click your comment button. All you have to do is make array of booleans just like you did with your v-model="commentdata[key]" and bind each of them to your v-if on textarea.

Answer 2

It is really difficult to understand what you want to do, but even though I tried to make an example to you here, I hope this can help you.

const posts = [
  {
   id: 1,
   title:'Post 1',
   text: 'Lorem ipsum dolor sit amet, duo soleat ancillae te. Illum luptatum no eum, eu has atomorum indoctum evertitur. Summo discere interesset nec ei. Ei modo ornatus quaerendum nec.',
   comments: []
  },
  {
   id: 2,
   title:'Post 2',
   text: 'Mel ad iusto homero, id duo soleat accommodare. Brute insolens theophrastus ne est. Malorum detraxit ut usu, cibo intellegat ex vix. Vidisse perpetua definitionem an est.',
   comments: []
  },
  {
   id: 3,
   title:'Post text 3',
    text: 'His te tollit debitis, eum intellegam disputando te. Sed id nostrud ocurreret. Id mei tempor definiebas, impetus regione euripidis ea mel. Per id illud volutpat necessitatibus. Mucius quidam inermis an eam, sit no detracto expetendis. No has ipsum ocurreret reprehendunt, dico explicari persecuti pro te, pro at ludus eirmod volutpat.',
   comments: []
  },
]

new Vue({
  el: '#app',
  data: function() {
    return {
      posts,
      selected: null,
      comment: ""
    }
  },
  methods: {
    openPost: function(postID) {
      this.selected = postID
    },
    saveComment: function() {
      if (this.comment) {
        this.posts = this.posts.map(post => {
          if (post.id === this.selected) {
            const comments = [...post.comments, this.comment]
            console.log("comments", comments)
            return { ...post,
              comments
            }
          }
          return post
        })
        this.comment = ""
        this.selected = null
      }
    },
    closePost: function() {
      this.selected = null
    }
  },
})

#app {
	 padding: 40px 30px 10px;
}
 #app .post-list {
	 list-style: none;
}
 #app .post-list li {
	 border: 1px solid #337ab7;
	 padding: 15px;
	 border-radius: 5px;
	 margin-bottom: 10px;
}
 #app .post-list li .title-wrapper {
	 display: flex;
	 justify-content: space-between;
}
 #app .post-list li .post-body .post-wrapper {
	 padding: 10px;
}
 #app .post-list li .post-body .post-wrapper .post-title {
	 color: #337ab7;
}
 #app .post-list li .post-body .post-wrapper .post-list {
	 list-style: none;
}
 #app .post-list li .post-body .text-wrapper {
	 padding: 10px;
}
 #app .post-list li .post-body .text-wrapper .label {
	 color: #337ab7;
	 margin-right: 20px;
}
 #app .post-list li .post-body .comment-wrapper {
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 max-width: 300px;
}
 #app .post-list li .post-body .comment-wrapper .comment-title {
	 width: 100%;
	 margin-left: 20px;
	 text-align: left;
	 color: #337ab7;
}
 #app .post-list li .post-body .comment-wrapper .btn {
	 background-color: #337ab7;
	 color: white;
	 margin-top: 10px;
	 max-width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul class="post-list">
    <li v-for="post in posts" :key="post.id">
      <div>
        <div class="title-wrapper">
          {{post.title}}
          <a href="#" v-if="post.id === selected" @click.prevent="closePost(post.id)">X</a>
        </div>
        <a href="#" v-if="post.id !== selected" @click.prevent="openPost(post.id)">Comment</a>
        <div v-if="post.id === selected" class="post-body">
          <div class="text-wrapper">
            <div class="label">Text:</div>
            {{post.text}}
          </div>
          <div class="post-wrapper">
            <div class="post-title">Posts:</div>
            <ul class="post-list">
              <li v-for="(comment, index) in post.comments" :key="index">{{comment}}</li>
            </ul>
          </div>
          <div class="comment-wrapper">
            <div class="comment-title">Comment:</div>
            <textarea v-model="comment"></textarea>
            <button class="btn" @click="saveComment">Save Comment</button>
          </div>
        </div>
      </div>
    </li>
  </ul>
  <div>