Отключить все текстовые сообщения в цикле при комментировании сообщения в vuejs

Question

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

   // 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

Это происходит потому, что все ваши текстовые области скрыты за одним логическим значением, которое переключается всякий раз, когда вы нажимаете на comment button.Все, что вам нужно сделать, это создать массив логических значений, как вы делали с v-model="commentdata[key]", и привязать каждый из них к вашему v-if в текстовой области.

Answer 2

Действительно трудно понять, что вы хотите сделать, но хотя я пытался показать вам пример здесь , я надеюсь, что это поможет вам.

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>