从Vue.js中的组件列表中单击选择一个组件

Question

您好我正在尝试使用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]

在回复部分，当我点击回复它显示回复框然后如果我点击另一个回复它先隐藏第一个回复框然后我必须再次点击回复框为该回复框 但是我想实现当我点击第二个回复框时它隐藏第一个并显示当前回复。

Answer 1

当您点击另一个“回复”按钮时，您将关闭replypart;您想要将actionReply方法更改为以下内容：

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
}