Select one component on click from a list of components in Vue.js - vue.js

Question

Hello I am trying to implement a comment system using Vue.Js
https://jsfiddle.net/jahid93/597vtcoz/
[<div id='app'>
<cmt-component :type="comment"></cmt-component>
<div class="comments" v-for="comment in commentList">
<div>
<span>{{comment.id}}</span>
<span>{{comment.comment}}</span>
</div>
<span class="reply-spa" #click="actionReply(comment.id)">Reply </span>
<div>
<cmt-component v-if="(selected_comment == comment.id) && replypart" :type="reply"></cmt-component>
</div>
</div>
</div>][1]
in the reply part when i click on reply it shows the reply box and then if i click on another reply it hides the first reply box first then i have to click on reply box again for that reply box
But I want to implement when I click on second reply box it hides first one and also show the current one.

Answer 1

You're toggling replypart off when you click on another 'Reply' button; you'd want to change your actionReply method to something like this:
actionReply: function (id) {
// if this is the reply box for the selected comment, or if there are no reply boxes open
if (id === this.selected_comment || this.replypart === false) {
this.replypart = !this.replypart
}
this.selected_comment = id
}