Vue 评论互不影响

前一阵做的一个评论的功能，记录一下

Bac： 一个贴吧的评论功能，点击每个帖子下面的评论，可以对 帖子的评论继续进行评论。

页面上 帖子的评论 是 v-for 遍历出来的，所有携带评论的样式也只有一套。

所有：如果点击 评论，展开对应这条评论的输入框，而不影响其他的评论（其他评论的输入框不展示出来），评论内容也不会互相影响。

解决： 是在请求接口得到所有评论的时候，遍历每一条评论，单独为他们加上一个属性showContent，所以在循环遍历的时候只判断当前每一条的item.showContent

是 true 或者 false 即可。（用全局变量来控制，就会影响其他的，所以这里单独为每一条在加一个属性）

第一部分代码：为每个属性单独增加属性showContent

// 获取评论列表
        getCommentList(page = this.currentPage){
          this.$http.get(url`,
          {
            params:{
              "page":page,
              "limit":this.pageSize,
              "id": parseInt(this.$route.query.id)
            }
          })
          .then(data => {
            if (data.result.code === 0){
              if (data.result.data){
                this.dataForm.AnswerList = data.result.data.data
                this.dataForm.AnswerList.forEach(item => {
                item.showContent = false
              }) //在这里，为帖子下面的每个评论单独增加一个属性为showContent,默认值为false
                    this.changePageTo(page)
                    this.totalData = data.result.data.count
                    this.$nextTick(() => {
                    this.$set(this.dataForm.AnswerList, this.which, { ...this.dataForm.AnswerList[this.which], showContent: true })
              })
              }
            }
          })
        },

 

第二部分代码：遍历所有的帖子的评论，v-if 是否展示为当前每条评论自己携带的showContent属性

<li class="comment-list-info" v-for="(data,index) in dataForm.AnswerList" :key="data.id">

<!-- 点击评论展示评论框 -->

                          <div class="comment-show" v-show="data.showContent">
                           <el-input type="textarea" placeholder="请输入您要回复的文字(最多500字).." maxlength="500" style="margin-bottom:5px;" v-model="dataForm.myCommentReply"></el-input>
                           <el-button style="float:right;margin-left:5px;width:62px;height:30px;background:#fff;border:1px solid #1D65A8;color:#1D65A8;font-size:12px;" @click="handleReply(data.id,index)">回复</el-button>
                           <el-button style="float:right;width:62px;height:30px;background:#fff;border:1px solid #1D65A8;color:#1D65A8;font-size:12px;text-align:center" @click="handleCancel(index)">取消</el-button>
                          </div>
                          <!-- 评论回复显示评论的回答 -->
                          <div class="comment-all-reply" v-show="data.showContent && data.commentVos.length">
                            <ul>
                              <li v-for="item in data.commentVos" :key="item.id">
                                <div class="comment-ava new-img">
                                    <img src="avatar-boy.gif"/>
                                </div>
                               <div class="com-reply">
                                 <p>{{item.commenterName}} 评论: </p>
                                 <p class="com-cont color-666">{{item.content}}</p>
                                  <p class="color-999">发表时间 {{item.createTime}}</p>
                                </div>
                                <div class="com-good" title="赞一下" @click="handleZan(item.id,2)">
                                  <img style="float:left;margin-left:15px;" src="../../../../../static/img/zan_03.png"/>
                                  <span style="float:left;margin-left:5px">{{item.praiseCount}}</span>
                                </div>
                              </li>
                            </ul>
                          </div>
</li>

第三部分代码：对某个帖子的评论进行评论的时候，展开该评论下面的回复框，并不会影响其他的

// 展示回复框
    handleComment(id, index){
      var show = !this.dataForm.AnswerList[index].showContent  // 传递了index，可以获取到具体点击的哪个评论，然后对其当前这条评论的评论框的状态进行取反
      this.$set(this.dataForm.AnswerList, index, { ...this.dataForm.AnswerList[index], showContent: show })
    }, // 这个非常重要，需要使用$set去触发数组的更新，并且把点击的评论的评论框的showContent 的状态 进行改变，从而显示/隐藏评论框

例图：