第一次写博客，主要记录下搭建个人博客的评论回复模块。
页面控件主要使用了element-ui里的组件。从后台拿到数据后，v-for循环渲染到页面上，核心问题是点击“回复”，可以单独展开回复框。解决办法是将后端返回的数据里每个对象里使用$set再添加属性，用来控制每一条留言回复的展开和收起。下图是整体效果。

下面上核心代码：
template：

<div class="reply" v-for="(site) in checkreplymsg" :key="site.id">
        <div class="avarta">
          <el-avatar class="header-img" :size="40" :src="geturl(site[0].url)"></el-avatar>
        </div>
        <div>
          <p class="name">{{site[0].name}}</p>
          <p class="comment">{{site[0].msg}}</p>
          <div class="backbox">
            <span class="time">{{formatUTC(site[0].time)}}</span>
            <span class="back" @click="showone(site[0])">{{site[0].title}}</span>
            <span class="delete" @click="deletee(site[0].id)">删除</span>
          </div>

          <div class="hostreply" v-for="(item) in site[1]" :key="item.id">
            <div class="avarta">
              <el-avatar class="header-img" :size="40" :src="geturl(item.url)"></el-avatar>
            </div>
            <div>
              <p class="nameownner">{{item.name}}</p>
              <div class="blogownner" v-show="item.hostshow">博主</div>
              <span class="replyinfor">回复</span>
              <div class="blogownner" v-show="item.visiteshow">博主</div>
              <span class="seee" v-show="item.hostshow">@{{site[0].name}}</span>
              <p class="comment2">:{{item.reply}}</p>
              <div class="backbox2">
                <span class="time">{{formatUTC(item.replytime)}}</span>
              </div>
            </div>
          </div>

          <div class="leavemsg1" v-show="site[0].isshow">
            <el-input
              type="textarea"
              :rows="3"
              :placeholder="getreplyname(site[0].name)"
              v-model="replymsg"
              clearable
            ></el-input>
            <button class="up1" @click="upreplymsg(site[0])">提交</button>
          </div>
        </div>
      </div>

下面是methods：

 //查询留言与回复
    showmsg() {
      var data = {};
      this.$axios
        .post(this.global.host + "/checkreplymsg", this.$qs.stringify(data))
        .then(res => {
          let arr = JSON.parse(res.data);
          arr.forEach((item, index) => {
            item.forEach((item, index) => {
              if (index == 0) {
                this.$set(item, "isshow", false);
                this.$set(item, "title", "回复");
              }
            });
          });
          arr.forEach((item, index) => {
            item.forEach((item, index) => {
              if (index == 1) {
                item.forEach((item, index) => {
                  if (item.email == "447464068@qq.com") {
                    this.$set(item, "visiteshow", false);
                    this.$set(item, "hostshow", true);
                  } else {
                    this.$set(item, "visiteshow", true);
                    this.$set(item, "hostshow", false);
                  }
                });
              }
            });
          });
          this.checkreplymsg = arr;
        });
    },
    //控制回复的输入框的收起
    showone(icon) {
      if (icon.title == "回复") {
        icon.isshow = true;
        icon.title = "收起";
      } else {
        icon.isshow = false;
        icon.title = "回复";
      }
    },

以上完成此功能。